<!DOCTYPE HTML>
<html lang="zh-CN.yml">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="前端知识梳理之CSS篇, 消逝の博客">
    <meta name="description" content="记录生活">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Global site tag (gtag.js) - Google Analytics -->


    <title>前端知识梳理之CSS篇 | 消逝の博客</title>
    <link rel="icon" type="image/png" href="/feng-pan-fp/myblog.git/favicon.jpeg.icon.png">

    <link rel="stylesheet" type="text/css" href="/feng-pan-fp/myblog.git/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/feng-pan-fp/myblog.git/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/feng-pan-fp/myblog.git/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/feng-pan-fp/myblog.git/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/feng-pan-fp/myblog.git/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/feng-pan-fp/myblog.git/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/feng-pan-fp/myblog.git/css/my.css">

    <script src="/feng-pan-fp/myblog.git/libs/jquery/jquery.min.js"></script>

<meta name="generator" content="Hexo 5.4.0"><link rel="stylesheet" href="/feng-pan-fp/myblog.git/css/prism-tomorrow.css" type="text/css">
<link rel="stylesheet" href="/feng-pan-fp/myblog.git/css/prism-line-numbers.css" type="text/css"></head>



   <style>
    body{
       background-image: url(https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/res/site/medias/background.jpg);
       background-repeat:no-repeat;
       background-size:cover;
       background-attachment:fixed;
    }
</style>



<body >
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/feng-pan-fp/myblog.git/" class="waves-effect waves-light">
                    
                    <span class="logo-span">消逝の博客</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/feng-pan-fp/myblog.git/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>首页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/feng-pan-fp/myblog.git/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>标签</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/feng-pan-fp/myblog.git/categories" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>学习</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/feng-pan-fp/myblog.git/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>文章归档</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/feng-pan-fp/myblog.git/shuoshuo" class="waves-effect waves-light">
      
      <i class="fas fa-book" style="zoom: 0.6;"></i>
      
      <span>说说</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/feng-pan-fp/myblog.git/about" class="waves-effect waves-light">
      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>简介</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/feng-pan-fp/myblog.git/contact" class="waves-effect waves-light">
      
      <i class="fas fa-comments" style="zoom: 0.6;"></i>
      
      <span>联系方式</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/feng-pan-fp/myblog.git/friends" class="waves-effect waves-light">
      
      <i class="fas fa-address-book" style="zoom: 0.6;"></i>
      
      <span>朋友</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="Search" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>


<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <div class="logo-name">消逝の博客</div>
        <div class="logo-desc">
            
            记录生活
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/feng-pan-fp/myblog.git/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			首页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/feng-pan-fp/myblog.git/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			标签
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/feng-pan-fp/myblog.git/categories" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			学习
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/feng-pan-fp/myblog.git/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			文章归档
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/feng-pan-fp/myblog.git/shuoshuo" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-book"></i>
			
			说说
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/feng-pan-fp/myblog.git/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-user-circle"></i>
			
			简介
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/feng-pan-fp/myblog.git/contact" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-comments"></i>
			
			联系方式
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/feng-pan-fp/myblog.git/friends" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-address-book"></i>
			
			朋友
		</a>
          
        </li>
        
        
        <li><div class="divider"></div></li>
        <li>
            <a href="https://gitee.com/feng-pan-fp/blogs.git" class="waves-effect waves-light" target="_blank">
                <i class="fab fa-github-square fa-fw"></i>Hi Host
            </a>
        </li>
        
    </ul>
</div>


        </div>

        
            <style>
    .nav-transparent .github-corner {
        display: none !important;
    }

    .github-corner {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        border: 0;
        transform: scale(1.1);
    }

    .github-corner svg {
        color: #0f9d58;
        fill: #fff;
        height: 64px;
        width: 64px;
    }

    .github-corner:hover .octo-arm {
        animation: a 0.56s ease-in-out;
    }

    .github-corner .octo-arm {
        animation: none;
    }

    @keyframes a {
        0%,
        to {
            transform: rotate(0);
        }
        20%,
        60% {
            transform: rotate(-25deg);
        }
        40%,
        80% {
            transform: rotate(10deg);
        }
    }
</style>

<a href="https://gitee.com/feng-pan-fp/blogs.git" class="github-corner tooltipped hide-on-med-and-down" target="_blank"
   data-tooltip="Hi Host" data-position="left" data-delay="50">
    <svg viewBox="0 0 250 250" aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
              fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
              fill="currentColor" class="octo-body"></path>
    </svg>
</a>
        
    </nav>

</header>

    



<div class="bg-cover pd-header post-cover" style="background-image: url('/feng-pan-fp/myblog.git/medias/featureimages/15.jpg')">
    <div class="container" style="right: 0px;left: 0px;">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <h1 class="description center-align post-title">前端知识梳理之CSS篇</h1>
                </div>
            </div>
        </div>
    </div>
</div>




<main class="post-container content">

    
    <link rel="stylesheet" href="/feng-pan-fp/myblog.git/libs/tocbot/tocbot.css">
<style>
    #articleContent h1::before,
    #articleContent h2::before,
    #articleContent h3::before,
    #articleContent h4::before,
    #articleContent h5::before,
    #articleContent h6::before {
        display: block;
        content: " ";
        height: 100px;
        margin-top: -100px;
        visibility: hidden;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        width: 345px;
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        padding: 35px 0 15px 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content {
        padding-bottom: 30px;
        overflow: auto;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;

        position: absolute;
        right: 23.5vw;
        display: block;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #floating-toc-btn {
        position: fixed;
        right: 15px;
        bottom: 76px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
    }

    #floating-toc-btn .btn-floating {
        width: 48px;
        height: 48px;
    }

    #floating-toc-btn .btn-floating i {
        line-height: 48px;
        font-size: 1.4rem;
    }
</style>
<div class="row">
    <div id="main-content" class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                        <div class="article-tag">
                            
                                <a href="/feng-pan-fp/myblog.git/tags/%E5%89%8D%E7%AB%AF%E5%8A%A0%E6%B2%B9%E7%AB%99/">
                                    <span class="chip bg-color">前端加油站</span>
                                </a>
                                
                        </div>
                        
                </div>
                <div class="col s5 right-align">
                    
                        <div class="post-cate">
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                                <a href="/feng-pan-fp/myblog.git/categories/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/" class="post-category">
                                    深度学习
                                </a>
                                
                        </div>
                        
                </div>
            </div>

            <div class="post-info">
                
                    <div class="post-date info-break-policy">
                        <i class="far fa-calendar-minus fa-fw"></i>
                        Publish Date:&nbsp;&nbsp;
                            2021-04-20
                    </div>
                    

                        
                            <div class="post-date info-break-policy">
                                <i class="far fa-calendar-check fa-fw"></i>
                                Update Date:&nbsp;&nbsp;
                                    2021-04-22
                            </div>
                            

                                

                                        
                                             <!-- 修改 -->
                                             
                                                <span id="busuanzi_container_site_pv" style='display:none'></span>
                                                <i class="fa fa-eye fa-fw"></i>Read Count:&nbsp;&nbsp;
                                                <span id="busuanzi_value_page_pv" ></span>
                                        
                                        
                                        
                        
                                                    <!-- 结束 -->
            </div>
        </div>
        <hr class="clearfix">

        

                

                        <div class="card-content article-card-content">
                            <div id="articleContent">
                                <h1 id="前端知识梳理之CSS篇"><a href="#前端知识梳理之CSS篇" class="headerlink" title="前端知识梳理之CSS篇"></a>前端知识梳理之CSS篇</h1><h2 id="熟悉HTML知识"><a href="#熟悉HTML知识" class="headerlink" title="熟悉HTML知识"></a>熟悉HTML知识</h2><h3 id="HTML常见元素"><a href="#HTML常见元素" class="headerlink" title="HTML常见元素"></a>HTML常见元素</h3><h4 id="head-部分"><a href="#head-部分" class="headerlink" title="head 部分"></a><code>head</code> 部分</h4><p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200517135332751.png"><img src="https://img-blog.csdnimg.cn/20200517135332751.png" alt="img"></a></p>
<h4 id="body部分"><a href="#body部分" class="headerlink" title="body部分"></a><code>body</code>部分</h4><p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200517135355522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200517135355522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<h3 id="doctype的意义是什么"><a href="#doctype的意义是什么" class="headerlink" title="doctype的意义是什么"></a>doctype的意义是什么</h3><ul>
<li>让浏览器以标准模式渲染</li>
<li>让浏览器知道元素的合法性</li>
</ul>
<h3 id="HTML、XHTML、HTML5的关系"><a href="#HTML、XHTML、HTML5的关系" class="headerlink" title="HTML、XHTML、HTML5的关系"></a>HTML、XHTML、HTML5的关系</h3><ul>
<li><p>HTML属于SGML（标记语言）</p>
</li>
<li><p>XHTML属于XML，是HTML进行XML严格化的结果</p>
</li>
<li><p>HTML5不属于SGML或XML，比XHTML宽松</p>
<h3 id="HTML5有什么变化"><a href="#HTML5有什么变化" class="headerlink" title="HTML5有什么变化"></a>HTML5有什么变化</h3></li>
<li><p>新的语义化元素</p>
</li>
<li><p>表单增强</p>
</li>
<li><p>新的API（离线、音视频、图形、实时通信、本地存储、设备能力）</p>
</li>
<li><p>分类和嵌套变更</p>
</li>
</ul>
<h3 id="em和-i-有什么区别"><a href="#em和-i-有什么区别" class="headerlink" title="em和 i 有什么区别"></a>em和 i 有什么区别</h3><ul>
<li>em是语义化的标签，表强调</li>
<li>i 是纯样式的标签，表斜体</li>
<li>HTML5中 i 不推荐使用，一般用作图标</li>
</ul>
<h3 id="语义化的意义"><a href="#语义化的意义" class="headerlink" title="语义化的意义"></a>语义化的意义</h3><ul>
<li>开发者容易理解</li>
<li>机器容易理解（搜索、读屏、软件）</li>
<li>有利用SEO</li>
<li>semantic microdata（语义微数据）例电影有评分</li>
</ul>
<h3 id="哪些元素可以自闭合"><a href="#哪些元素可以自闭合" class="headerlink" title="哪些元素可以自闭合"></a>哪些元素可以自闭合</h3><ul>
<li>表单元素 input</li>
<li>图片 img</li>
<li>br hr</li>
<li>meta link</li>
</ul>
<h3 id="HTML和DOM关系"><a href="#HTML和DOM关系" class="headerlink" title="HTML和DOM关系"></a>HTML和DOM关系</h3><ul>
<li>HTML是“死”的（字符串）</li>
<li>DOM是由HTML解析而来的，是活的</li>
<li>JS可以维护DOM</li>
</ul>
<h3 id="property-和-attritube-区别"><a href="#property-和-attritube-区别" class="headerlink" title="property 和 attritube 区别"></a>property 和 attritube 区别</h3><ul>
<li>attritube 是“死”的</li>
<li>property 是活的</li>
<li>相互之间不会影响</li>
</ul>
<h3 id="form的好处"><a href="#form的好处" class="headerlink" title="form的好处"></a>form的好处</h3><ul>
<li>直接提交表单</li>
<li>使用 submit / reset 按钮</li>
<li>便于浏览器保存表单</li>
<li>第三方库可以整体取值</li>
<li>第三方库可以进行表单验证</li>
</ul>
<h2 id="CSS精华（Cascading-Style-Sheet）层叠样式表"><a href="#CSS精华（Cascading-Style-Sheet）层叠样式表" class="headerlink" title="CSS精华（Cascading Style Sheet）层叠样式表"></a>CSS精华（Cascading Style Sheet）层叠样式表</h2><h3 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h3><ul>
<li>用于适配HTML元素</li>
<li>分类和权重</li>
<li>解析方式和性能</li>
<li>值得关注的选择器</li>
</ul>
<h3 id="选择器分类"><a href="#选择器分类" class="headerlink" title="选择器分类"></a>选择器分类</h3><ul>
<li>元素选择器 <code>a&#123;&#125;</code></li>
<li>伪元素选择器 <code>::before&#123;&#125;</code></li>
<li>类元素选择器 <code>.link&#123;&#125;</code></li>
<li>属性选择器 <code>[type=radio]&#123;&#125;</code></li>
<li>伪类选择器 <code>:hover&#123;&#125;</code></li>
<li>ID选择器 <code>#id&#123;&#125;</code></li>
<li>组合选择器 <code>[type=checkbox] + label&#123;&#125;</code></li>
<li>否定选择器 <code>:not(.link)&#123;&#125;</code></li>
<li>通用选择器 <code>*&#123;&#125;</code></li>
</ul>
<h3 id="选择器权重（1）"><a href="#选择器权重（1）" class="headerlink" title="选择器权重（1）"></a>选择器权重（1）</h3><ul>
<li>ID选择器 #id{}+100</li>
<li>类 属性 伪类 +10</li>
<li>元素 伪元素 +1</li>
<li>其它选择器 +0</li>
</ul>
<p>例子：计算一个不进位的数字</p>
<pre><code>CPP
#id.link a[href]
————————————————
计算过程：
#id +100
.link +10
a +1
[href] +0
结果:111
CPP
#id .link.active
————————————————
计算过程：
#id +100
.link +10
.active +10
结果:120
</code></pre>
<p>那么，我们怎么理解 <strong>不进位的数字</strong> 这关键字眼呢？用一个简单例子吧：</p>
<pre><code>CPP
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;CSS选择器&lt;/title&gt;
    &lt;style&gt;
        #test1&#123;
            color: red;
        &#125;
        #test1.test1&#123;
            color: blue;
        &#125;
        .test2&#123;
            color: red;
        &#125;
        div.test2&#123;
            color: blue;
        &#125;
        #test3&#123;
            color: red;
        &#125;
        .c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11&#123;
            color: blue;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;body&quot; id=&quot;body&quot;&gt;
    &lt;div id=&quot;test1&quot; class=&quot;test1&quot;&gt;蓝色&lt;/div&gt;
    &lt;div class=&quot;test2&quot;&gt;蓝色&lt;/div&gt;
    &lt;div id=&quot;test3&quot; class=&quot;c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11&quot;&gt;红色&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>结果如下图所示：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200526201651903.png"><img src="https://img-blog.csdnimg.cn/20200526201651903.png" alt="img"></a><br>不妨发现，最后一个 <code>div</code>，尽管我们类选择器有11个，加起来有110，但是依旧没有 id 选择器优先级高，正是因为这个不进位的数字，简单说：<strong>你大爷还是你大爷！</strong></p>
<h3 id="选择器权重（2）"><a href="#选择器权重（2）" class="headerlink" title="选择器权重（2）"></a>选择器权重（2）</h3><ul>
<li>!important 优先级最高</li>
<li>元素属性 优先级高</li>
<li>相同权重 后写的生效</li>
</ul>
<p>举个栗子：</p>
<pre><code>CPP
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;CSS选择器&lt;/title&gt;
    &lt;style&gt;
        .test1&#123;
            color: red;
        &#125;
        .test1&#123;
            color: blue;
        &#125;
        .test2&#123;
            color: red!important;
        &#125;
        .test2&#123;
            color: blue;
        &#125;
        #test3&#123;
            color: red;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;body&quot; id=&quot;body&quot;&gt;
    &lt;div class=&quot;test1&quot;&gt;蓝色&lt;/div&gt;
    &lt;div class=&quot;test2&quot;&gt;红色&lt;/div&gt;
    &lt;div id=&quot;test3&quot; style=&quot;color: blue;&quot;&gt;蓝色&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>运行结果如下图所示：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200526202255146.png"><img src="https://img-blog.csdnimg.cn/20200526202255146.png" alt="img"></a></p>
<h3 id="非布局样式"><a href="#非布局样式" class="headerlink" title="非布局样式"></a>非布局样式</h3><h4 id="字体"><a href="#字体" class="headerlink" title="字体"></a>字体</h4><ul>
<li>字体族 例如: serif、monospace（不能添加引号）衬线字体<ul>
<li>多字体fallback 例如： “monaco”、”Microsoft Yahei”、”PingFang SC”</li>
<li>网络字体、自定义字体</li>
<li>iconfont</li>
</ul>
</li>
</ul>
<h4 id="行高（经典问题）"><a href="#行高（经典问题）" class="headerlink" title="行高（经典问题）"></a>行高（经典问题）</h4><ul>
<li>行高的构成（由line-box组成，line-box由inline-box组成）</li>
<li>行高相关的现象和方案（可以通过设置 line-height来实现垂直居中效果）</li>
<li>行高的调整</li>
</ul>
<p><strong>经典问题</strong>：图片下面有空隙，原理是什么？怎样去除？<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200526210039103.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200526210039103.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a><br>原理是因为图片按照 inline 进行排版，排版的时候会涉及到字体对齐，默认按照 <code>baseline</code> 对齐，<code>baseline</code>和底线之间是有偏差的，偏差大小是根据字体大小而定，如果是12px字体大小，则图片空隙就是3px左右。这就是经典图片3px空隙问题。</p>
<p><strong>解决方式</strong>：</p>
<ul>
<li><p>由于默认按照<code>baseline</code>对齐，不妨将 <code>vertical-align</code> 设为 <code>bottom</code>，按照底线对齐。</p>
</li>
<li><p>设置</p>
<pre><code>display:block
</code></pre>
<p>可以解决该问题，但是会独占一行，如下图所示：</p>
<p><img src="https://img-blog.csdnimg.cn/20200526210520421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></p>
<h4 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h4></li>
<li><p>背景颜色</p>
</li>
<li><p>渐变色背景</p>
</li>
<li><p>多背景叠加</p>
</li>
</ul>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;渐变色背景（线性梯度）&lt;/title&gt;
    &lt;style&gt;
        .div1&#123;
            height: 90px;
        &#125;
        .div2&#123;
            height: 90px;
            /*background: linear-gradient(to right,red,green);*/
            /*background: linear-gradient(180deg,red,green);*/
            /*background: linear-gradient(135deg,red 0,green 15%,yellow 50%,blue 90%);*/
            
            /*网格线*/
            background: linear-gradient(135deg,transparent 0,transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),
                        linear-gradient(45deg,transparent 0,transparent 49.5%,red 49.5%,red 50.5%,transparent 50.5%,transparent 100%);
            background-size: 30px 30px;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;div1&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;div2&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>最后一个例子展示效果：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200526220315152.png"><img src="https://img-blog.csdnimg.cn/20200526220315152.png" alt="img"></a></p>
<ul>
<li>背景图片和属性（雪碧图）</li>
</ul>
<pre><code>CPP
background-repeat: no-repeat;
background-size: 30px 30px; //相对于容器偏移
background-position: 30px 30px;
</code></pre>
<p><strong>雪碧图</strong> 就是将很多个图片进行拼接成一个图片，然后通过 <code>background-position</code>等属性进行偏移，在网页中得到对应图片，来达到减少http请求。</p>
<ul>
<li><p>base64和性能优化</p>
<p>将图片进行base64编码后，就是一个字符文本，缺点之一就是图片的体积会增大 <code>1/3</code> 左右，并且放入css文件中，也会导致css文件变大。另外，虽然能减少http请求，但增大了解码的开销。适用于小图标<code>icon</code>，例如<code>loading</code>文件等。最后，在开发环境一般不采用直接将图片进行 <code>base64</code> 编码，因为对于协同开发来说，无法知晓图片原样，只有一个文本。</p>
<p>一般情况下，是在生产环境下，通过打包的方式，将小图片进行 <code>base64</code>编码。</p>
</li>
<li><p>多分辨率适配</p>
</li>
</ul>
<h4 id="边框（经典问题）"><a href="#边框（经典问题）" class="headerlink" title="边框（经典问题）"></a>边框（经典问题）</h4><ul>
<li>边框的属性：线型 大小 颜色</li>
</ul>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;边框&lt;/title&gt;
    &lt;style&gt;
        .c1&#123;
            width: 400px;
            height: 200px;
            border: 1px solid red;
            /*border: 5px solid red;*/
            /*border: 5px dotted red;*/
            /*border: 5px dashed red;*/
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;c1&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<ul>
<li>边框背景图</li>
</ul>
<p><strong>经典问题</strong>：九宫格问题，例如下面图片，我们如果想要实现9个不同形式，然后中间放内容，如果用原本9个div方法，那么会非常麻烦，而css3提供了 <code>border</code>方式可以解决上述问题。<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200526232959608.png"><img src="https://img-blog.csdnimg.cn/20200526232959608.png" alt="img"></a><br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200526233253297.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200526233253297.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a><br>在没有在 <code>border-image</code>处设置 <code>round</code>之前，是如上效果，后面 30 是用来切出四个角。</p>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;边框&lt;/title&gt;
    &lt;style&gt;
        .c1&#123;
            width: 400px;
            height: 200px;
            border: 30px solid transparent;
            border-image: url(./xx.png) 30 round; /*round将图片进行整数个拼接*/
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;c1&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>在 <code>border-image</code>处设置 <code>round</code>之后，是如下效果，基本达到我们想要的效果。<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200526232832159.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200526232832159.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;边框&lt;/title&gt;
    &lt;style&gt;
        .c2&#123;
            width: 400px;
            height: 200px;
            border: 30px solid transparent;
            border-image: url(./xx.png) 30 round; /*round将图片进行整数个拼接*/
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;c2&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<ul>
<li>边框衔接（三角形）</li>
</ul>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;边框&lt;/title&gt;
    &lt;style&gt;
        .c3&#123;
            width: 0px;
            height: 200px;
            border-bottom: 30px solid red;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;c3&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>实现三角形，效果如下：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200526233958910.png"><img src="https://img-blog.csdnimg.cn/20200526233958910.png" alt="img"></a></p>
<h4 id="滚动"><a href="#滚动" class="headerlink" title="滚动"></a>滚动</h4><p>产生滚动的原因：当内容比容器多的时候，即容器装不下内容的时候，就需要滚动。滚动主要包括如下几个方面：</p>
<ul>
<li>滚动行为和滚动条<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200527100408454.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200527100408454.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a><br><code>overflow</code> 设置<code>auto</code> 和 <code>scroll</code> 区别，auto 是内容多于容器时显示滚动条，反正，不显示。而 scroll 是一直显示滚动条<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200527100654576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200527100654576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></li>
</ul>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;滚动&lt;/title&gt;
    &lt;style&gt;
        .div1&#123;
            background: red;
            height: 200px;
            overflow: scroll;  /*可选值: hidden visible auto scroll*/
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;div1&quot;&gt;
        &lt;p&gt;test&lt;/p&gt;
        &lt;p&gt;test&lt;/p&gt;
        &lt;p&gt;test&lt;/p&gt;
        &lt;p&gt;test&lt;/p&gt;
        &lt;p&gt;test&lt;/p&gt;
        &lt;p&gt;test&lt;/p&gt;
        &lt;p&gt;test&lt;/p&gt;
        &lt;p&gt;test&lt;/p&gt;
        &lt;p&gt;test&lt;/p&gt;
        &lt;p&gt;test&lt;/p&gt;
        &lt;p&gt;test&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h4 id="文字折行（经典问题）"><a href="#文字折行（经典问题）" class="headerlink" title="文字折行（经典问题）"></a>文字折行（经典问题）</h4><ul>
<li>overflow-wrap（word-wrap）通用换行控制（是否保留单词）</li>
<li>word-break 针对多字节文字（中文句字也是单词）</li>
<li>white-space 空白处是否断行</li>
</ul>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;文字折行&lt;/title&gt;
    &lt;style&gt;
        .div1&#123;
            border: 1px solid;
            width: 8em;
            overflow-wrap: normal;
            word-break: normal;
            white-space: normal;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;div1&quot;&gt;
        学如逆水行舟，不进则退！Learning is like sailing against the current, retreating if not advancing
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>展示效果:<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200527102807870.png"><img src="https://img-blog.csdnimg.cn/20200527102807870.png" alt="img"></a><br><strong>经典问题</strong>：怎么让一个很长的文本不换行？</p>
<p>将上述属性设置为 <code>nowrap</code>即可</p>
<pre><code>CPP
white-space: nowrap;
</code></pre>
<p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200527102716363.png"><img src="https://img-blog.csdnimg.cn/20200527102716363.png" alt="img"></a></p>
<h4 id="装饰性属性"><a href="#装饰性属性" class="headerlink" title="装饰性属性"></a>装饰性属性</h4><ul>
<li>字重（粗体）font-weight</li>
<li>斜体 font-style:itatic</li>
<li>下划线 text-decoration</li>
<li>指针 cursor</li>
</ul>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;font-weight&lt;/title&gt;
    &lt;style&gt;
        .div1&#123;
            font-weight: normal; /*400*/
            font-weight: bold;   /*700*/
            font-weight: bolder;
            font-weight: lighter;
            font-weight: 100;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;div1&quot;&gt;学如逆水行舟，不进则退！&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3 id="CSS-Hack（了解）"><a href="#CSS-Hack（了解）" class="headerlink" title="CSS Hack（了解）"></a>CSS Hack（了解）</h3><h4 id="hack"><a href="#hack" class="headerlink" title="hack"></a>hack</h4><p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200527222702460.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200527222702460.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a><br>用来<strong>处理浏览器兼容性</strong>做法，好处就是<strong>简单粗暴</strong>。</p>
<ul>
<li>Hack即不合法但生效的写法</li>
<li>主要用于区分不同浏览器</li>
<li>缺点：难理解 难维护 难失效</li>
<li>替代方案：特性检测（检测浏览器是否有相关特性，没有的话就针对性处理）</li>
<li>替代方案：针对性加class（例如检测到 <code>IE6</code>，那么就加<code>IE6</code>的class）</li>
</ul>
<h2 id="CSS-面试真题"><a href="#CSS-面试真题" class="headerlink" title="CSS 面试真题"></a>CSS 面试真题</h2><h3 id="css样式（选择器）的优先级"><a href="#css样式（选择器）的优先级" class="headerlink" title="css样式（选择器）的优先级"></a>css样式（选择器）的优先级</h3><ul>
<li>计算权重确定</li>
<li>!important</li>
<li>内联样式</li>
<li>后写的优先级高</li>
</ul>
<h3 id="雪碧图的作用"><a href="#雪碧图的作用" class="headerlink" title="雪碧图的作用"></a>雪碧图的作用</h3><ul>
<li><strong>雪碧图</strong> 就是将很多个图片进行拼接成一个图片，然后通过 <code>background-position</code>等属性进行偏移，在网页中得到对应图片，来达到减少http请求，提高页面加载性能。</li>
<li>有一些情况下可以减少图片大小（例如png格式图片，每张图片颜色基本上一样的，有可能总的图片大小是小于每个图片加起来的大小的）</li>
</ul>
<h3 id="自定义字体的使用场景"><a href="#自定义字体的使用场景" class="headerlink" title="自定义字体的使用场景"></a>自定义字体的使用场景</h3><ul>
<li>宣传 / 品牌 / banner 等固定文案</li>
<li>字体图标（将文字变为图标）</li>
</ul>
<h3 id="base64的作用"><a href="#base64的作用" class="headerlink" title="base64的作用"></a>base64的作用</h3><p>将图片进行base64编码后，就是一个字符文本，缺点之一就是图片的体积会增大 <code>1/3</code> 左右，并且放入css文件中，也会导致css文件变大。另外，虽然能减少http请求，但增大了解码的开销。适用于小图标<code>icon</code>，例如<code>loading</code>文件等。最后，在开发环境一般不采用直接将图片进行 <code>base64</code> 编码，因为对于协同开发来说，无法知晓图片原样，只有一个文本。</p>
<ul>
<li>用于减少http请求</li>
<li>适用于小图片</li>
<li>base64的体积约为原图的 4/3</li>
</ul>
<h3 id="伪类和伪元素的区别？"><a href="#伪类和伪元素的区别？" class="headerlink" title="伪类和伪元素的区别？"></a>伪类和伪元素的区别？</h3><ul>
<li>伪类 表 状态（某元素是个链接 link状态）</li>
<li>伪元素是真的有元素（<code>::before&#123;&#125;</code>，在页面中会显示内容）</li>
<li>前者使用单冒号，后者使用双冒号</li>
</ul>
<h3 id="如何美化checkbox"><a href="#如何美化checkbox" class="headerlink" title="如何美化checkbox"></a>如何美化checkbox</h3><ul>
<li>label [for] 和 id</li>
<li>隐藏原生 input（所有的样式由 <code>label</code> 来搞定）</li>
<li>:checked + label</li>
</ul>
<p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200527225852233.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200527225852233.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<h2 id="CSS-布局"><a href="#CSS-布局" class="headerlink" title="CSS 布局"></a>CSS 布局</h2><p>CSS体系知识的重中之重</p>
<ul>
<li>早期以 table 为主（简单）</li>
<li>后来以技巧性布局为主（难）</li>
<li>现在有 flexbox / grid（偏简单）</li>
</ul>
<h3 id="常用布局方式"><a href="#常用布局方式" class="headerlink" title="常用布局方式"></a>常用布局方式</h3><ul>
<li>table表格布局</li>
<li>float 浮动+ margin</li>
<li>inline-block 布局</li>
<li>flexbox 布局</li>
</ul>
<h3 id="布局方式（表格）"><a href="#布局方式（表格）" class="headerlink" title="布局方式（表格）"></a>布局方式（表格）</h3><pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;table布局&lt;/title&gt;
    &lt;style&gt;
        .table&#123;
            margin-top: 20px;
            width: 500px;
            height: 100px;
            display: table;
        &#125;
        .table-row&#123;
            display: table-row;
        &#125;
        .table-cell&#123;
            vertical-align: center;
            display: table-cell;
        &#125;
        .left&#123;
            background: red;
            vertical-align: middle;
        &#125;
        .right&#123;
            background: blue;
            vertical-align: middle;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;table&quot;&gt;
        &lt;div class=&quot;table-row&quot;&gt;
            &lt;div class=&quot;left table-cell&quot;&gt;left&lt;/div&gt;
            &lt;div class=&quot;right table-cell&quot;&gt;right&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>展示效果如下图所示：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528115357438.png"><img src="https://img-blog.csdnimg.cn/20200528115357438.png" alt="img"></a></p>
<h3 id="display-position（经典问题）"><a href="#display-position（经典问题）" class="headerlink" title="display / position（经典问题）"></a>display / position（经典问题）</h3><ul>
<li>display 常用属性值： block（块级） / inline（内联） / inline-block（对内表现为block，可以有宽高，对外表现为inline，可以与其它元素排在同一行）</li>
<li>position 常用属性值：static（静态） / relative（相对） / absolute（绝对） / fixed（固定）</li>
</ul>
<p><strong>display</strong></p>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;display&lt;/title&gt;
    &lt;style&gt;
        .block&#123;
            height: 200px;
            background: red;
        &#125;
        .inline&#123;
            display: inline;
            background: green;
        &#125;
        .inline-block&#123;
            display: inline-block;
            width: 200px;
            height: 100px;
            background: blue;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;block&quot;&gt;
        block
    &lt;/div&gt;
    &lt;div class=&quot;inline&quot;&gt;inline&lt;/div&gt;
    &lt;div class=&quot;inline-block&quot;&gt;inline-block&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p><strong>position</strong></p>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;position&lt;/title&gt;
    &lt;style&gt;
        .p1&#123;
            width: 100px;
            height: 100px;
            background: red;
        &#125;
        .p2&#123;
            position: relative;
            width: 100px;
            height: 100px;
            left: 20px;
            top: -10px;
            background: blue;
        &#125;
        .p3&#123;
            position: absolute;
            width: 100px;
            height: 100px;
            left: 80px;
            top: 30px;
            background: yellow;
        &#125;
        .p4&#123;
            position: fixed;
            width: 100px;
            height: 100px;
            left: 0;
            bottom: 10px;
            background: green;
        &#125;
        .p5&#123;
            width: 100px;
            height: 100px;
            background: pink;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;p1&quot;&gt;position:static&lt;/div&gt;
    &lt;div class=&quot;p2&quot;&gt;position:relative&lt;/div&gt;
    &lt;div class=&quot;p3&quot;&gt;position:absloute&lt;/div&gt;
    &lt;div class=&quot;p4&quot;&gt;position:fixed&lt;/div&gt;
    &lt;div class=&quot;p5&quot;&gt;no position&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>展示效果如下：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528164155927.png"><img src="https://img-blog.csdnimg.cn/20200528164155927.png" alt="img"></a><br>由上图可知，当设置 <code>position</code> 为 <code>relative</code> 后，no position（粉色块） 并没有在蓝色块下面，也就是说设置 <code>position</code> 为 <code>relative</code> 后，占据空间还是按照原来的方式计算的，不会因为偏移而改变布局的计算。</p>
<p><strong>经典问题</strong>：</p>
<ul>
<li>绝对定位 <code>absolute</code>，会优先查找父级定位为 <code>absolute</code> 或 <code>relative</code>的进行定位，如果父级没有，找上级，那么最终就会根据 <code>body</code>进行定位，它和 <code>fixed</code>一样，也是脱离了文档流。</li>
<li><code>fixed</code>相对于屏幕进行定位</li>
</ul>
<p><strong>层叠问题</strong> ，因为默认会根据先后顺序显示，因此会有覆盖情况，此时，可以通过设计 <code>z-index</code> 解决，权重越大，优先显示。</p>
<h3 id="flexbox（圣杯布局）"><a href="#flexbox（圣杯布局）" class="headerlink" title="flexbox（圣杯布局）"></a>flexbox（圣杯布局）</h3><ul>
<li>弹性盒子</li>
<li>盒子本来就是并列的</li>
<li>指定宽度即可</li>
<li>移动端常用</li>
</ul>
<p>（目前用的不是很热的原因是虽然简单方便，但是<strong>兼容性</strong>有点问题）</p>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;flexbox&lt;/title&gt;
    &lt;style&gt;
        .container&#123;
            width: 800px;
            height: 200px;
            display: flex;
            border: 1px solid black;
        &#125;
        .flex&#123;
            background: blue;
            flex: 1;
            margin: 5px;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;flex&quot;&gt;flex&lt;/div&gt;
        &lt;div class=&quot;flex&quot;&gt;flex&lt;/div&gt;
        &lt;div class=&quot;flex&quot;&gt;flex&lt;/div&gt;
        &lt;div class=&quot;flex&quot;&gt;flex&lt;/div&gt;
        &lt;div class=&quot;flex&quot;&gt;flex&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>展示效果如下：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528170053892.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200528170053892.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<p>由这个很方便的布局，我们可以写一个<strong>圣杯布局</strong>的例子（即左右固定，中间自适应）：</p>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;圣杯布局-flexbox&lt;/title&gt;
    &lt;style&gt;
        *&#123;
            margin: 0;
        &#125;
        .container&#123;
            min-height: 200px;
            display: flex;
        &#125;
        .left&#123;
            width: 200px;
            display: flex;
            background: red;
        &#125;
        .center&#123;
            background: yellow;
            flex: 1;
        &#125;
        .right&#123;
            width: 200px;
            display: flex;
            background: blue;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;left&quot;&gt;left&lt;/div&gt;
        &lt;div class=&quot;center&quot;&gt;center&lt;/div&gt;
        &lt;div class=&quot;right&quot;&gt;right&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/202005281708036.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/202005281708036.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<h3 id="float"><a href="#float" class="headerlink" title="float"></a>float</h3><ul>
<li>元素”浮动”</li>
<li>脱离文档流（不会对其它元素的布局造成影响）</li>
<li>但不脱离文本流</li>
</ul>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;float布局&lt;/title&gt;
    &lt;style&gt;
        .container&#123;
            width: 400px;
            background: red;
        &#125;
        .p1&#123;
            width: 200px;
            height: 80px;
            float: left;
            background: pink;
        &#125;

    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;span class=&quot;p1&quot;&gt;float元素&lt;/span&gt;
        &lt;div class=&quot;p2&quot;&gt;很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>展示效果如下：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/202005281718026.png"><img src="https://img-blog.csdnimg.cn/202005281718026.png" alt="img"></a></p>
<h3 id="float-特性的影响（经典问题）"><a href="#float-特性的影响（经典问题）" class="headerlink" title="float 特性的影响（经典问题）"></a>float 特性的影响（经典问题）</h3><p><strong>float 特性对自己的影响</strong>：</p>
<ul>
<li>形成块（BFC，可以使得inline元素能够设置宽高，例如上文代码，原本span元素不能设置宽高的，但通过设置float布局，使得可以设置宽高）</li>
<li>位置尽量靠上</li>
<li>位置尽量靠左（右）（对于上述解释，是如果 <code>container</code>宽度够的话，就尽量靠上和靠左，如果不行的话，就往下排了）</li>
</ul>
<p>简单例子：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528172259918.png"><img src="https://img-blog.csdnimg.cn/20200528172259918.png" alt="img"></a><br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528172240259.png"><img src="https://img-blog.csdnimg.cn/20200528172240259.png" alt="img"></a><br><strong>float 特性对兄弟的影响</strong>：</p>
<ul>
<li>上面贴非 float 元素</li>
<li>旁边贴 float 元素</li>
<li>不影响其它块级元素位置（不脱离文档流）</li>
<li>影响其它块级元素内部文本（脱离了文本流）</li>
</ul>
<p><strong>float 特性对父级的影响</strong>：</p>
<ul>
<li>从布局上 “消失”（父级不会管它的宽高）</li>
<li><strong>经典问题</strong>：高度塌陷 （假设float元素，原本是 100px 高度，这个时候很期望父级能撑开100个像素，但因为设置了 float，等于消失了，并不会在意这 100个像素，因此，如果没有其它元素支撑高度的话，父级的高度就会设置为0，这就是高度塌陷）</li>
</ul>
<h3 id="清楚浮动的方式"><a href="#清楚浮动的方式" class="headerlink" title="清楚浮动的方式"></a>清楚浮动的方式</h3><p><strong>经典问题</strong>：</p>
<p>清除浮动的方式</p>
<p>① 当我们设置为 float 后，会将元素设为 BFC，接管自己的宽高，因此我们也可以让父级元素设置为 BFC，来接管自己的宽高。</p>
<p>初始状态：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528174749689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200528174749689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a><br>在父级元素设置 <code>overflow: auto/hidden;</code></p>
<pre><code>CPP
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;清楚浮动&lt;/title&gt;
    &lt;style&gt;
        .container&#123;
            background: red;
            width: 400px;
            overflow: auto;
            margin: 10px;
        &#125;
        .p1&#123;
            background: pink;
            float: left;
            width: 200px;
            height: 50px;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;span&gt;xxxxxx&lt;/span&gt;
        &lt;span class=&quot;p1&quot;&gt;float&lt;/span&gt;
        &lt;span class=&quot;p1&quot;&gt;float&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;container&quot; style=&quot;height: 200px; background: blue;&quot;&gt;
        &lt;p&gt;第一行&lt;/p&gt;
        &lt;p&gt;第二行&lt;/p&gt;
        &lt;p&gt;第三行&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>最终状态效果图如下：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528174958468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200528174958468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></a></p>
<p>② 由于 float 不脱离文档流（不会影响其它元素布局），那么就可以使得元素刚好到达下面位置。就可以通过其它元素将父级撑起来，当父级刚好撑到下方位置时，就可以将浮动清除掉。</p>
<p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528175222135.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200528175222135.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<pre><code>CPP
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;清楚浮动&lt;/title&gt;
    &lt;style&gt;
        .container&#123;
            background: red;
            width: 400px;
        &#125;
        .p1&#123;
            background: pink;
            float: left;
            width: 200px;
            height: 50px;
        &#125;
        .removeFloat::after&#123;
            content: &#39;aaa&#39;;
            clear: both; /*保证当前元素左右没有浮动元素*/
            display: block;
            height: 0;
            visibility: hidden;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container removeFloat&quot;&gt;
        &lt;span&gt;xxxxxx&lt;/span&gt;
        &lt;span class=&quot;p1&quot;&gt;float&lt;/span&gt;
        &lt;span class=&quot;p1&quot;&gt;float&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;container&quot; style=&quot;height: 200px; background: blue;&quot;&gt;
        &lt;p&gt;第一行&lt;/p&gt;
        &lt;p&gt;第二行&lt;/p&gt;
        &lt;p&gt;第三行&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>经典清除浮动方式，效果图如下：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528175659432.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200528175659432.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<h3 id="float（圣杯布局）"><a href="#float（圣杯布局）" class="headerlink" title="float（圣杯布局）"></a>float（圣杯布局）</h3><pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;圣杯布局-float&lt;/title&gt;
    &lt;style&gt;
        .container&#123;
            min-height: 200px;
        &#125;
        .left&#123;
            float: left;
            background: red;
            width: 200px;
        &#125;
        .center&#123;
            margin-left: 200px;
            margin-right: 200px;
            background: yellow;
        &#125;
        .right&#123;
            float: right;
            background: blue;
            width: 200px;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;left&quot;&gt;left&lt;/div&gt;
        &lt;div class=&quot;right&quot;&gt;right&lt;/div&gt;
        &lt;div class=&quot;center&quot;&gt;center&lt;/div&gt;
        
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>展示效果如下：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528184805501.png"><img src="https://img-blog.csdnimg.cn/20200528184805501.png" alt="img"></a></p>
<h3 id="inline-block-布局"><a href="#inline-block-布局" class="headerlink" title="inline-block 布局"></a>inline-block 布局</h3><ul>
<li>像文本一样排block元素</li>
<li>没有清楚浮动等问题</li>
<li>需要处理间隙</li>
</ul>
<p>例如下图，红蓝之间有一个间隙，是因为 <code>inline-block</code>就像文本一样，我们没办法让两个字紧紧地挨着，于是我们就有了下文所述解决方式：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528185802907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200528185802907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;inline-block布局&lt;/title&gt;
    &lt;style&gt;
        .container&#123;
            width: 800px;
            height: 200px;
            font-size: 0;
        &#125;
        .left&#123;
            font-size: 15px;
            background: red;
            display: inline-block;
            width: 200px;
            height: 200px;
        &#125;
        .right&#123;
            font-size: 15px;
            background: blue;
            display: inline-block;
            width: 500px;
            height: 200px;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;left&quot;&gt;left&lt;/div&gt;
        &lt;div class=&quot;right&quot;&gt;right&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>展示效果如下：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528185937166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200528185937166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a><br>查看上述代码，将父级元素字体大小设置为0即可解决间隙问题，但子元素需要设置自己的字体大小，不然就不会显示。</p>
<p>因此，做自适应方面会有点麻烦，不像上文 <code>float+margin</code> 那样简单</p>
<h3 id="响应式设计和布局"><a href="#响应式设计和布局" class="headerlink" title="响应式设计和布局"></a>响应式设计和布局</h3><ul>
<li>在不同的设备上正常使用</li>
<li>一般处理屏幕大小问题</li>
<li>主要方法：隐藏 + 折行 + 自适应空间（rem：通过html的字体大小（即 <code>font-size</code>）来确定元素大小，但不太精确 / viewport：通过 js或手工 确定整个界面放到多大 / media query：媒体查询，根据不同的设备来匹配不同的样式）</li>
</ul>
<p>下图含义就是只有在宽度小于 640px 时才会生效，即让移动端进行适配。<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528191524133.png"><img src="https://img-blog.csdnimg.cn/20200528191524133.png" alt="img"></a></p>
<h2 id="CSS-面试真题-1"><a href="#CSS-面试真题-1" class="headerlink" title="CSS 面试真题"></a>CSS 面试真题</h2><h3 id="实现两栏（三栏）布局的方法"><a href="#实现两栏（三栏）布局的方法" class="headerlink" title="实现两栏（三栏）布局的方法"></a>实现两栏（三栏）布局的方法</h3><ul>
<li>表格布局</li>
<li>float + margin 布局（兼容性好）</li>
<li>inline-block 布局（需要处理间隙问题）</li>
<li>flexbox布局（简单，但兼容性不是很好）</li>
</ul>
<h3 id="position-absolute-fixed-有什么区别？"><a href="#position-absolute-fixed-有什么区别？" class="headerlink" title="position:absolute / fixed 有什么区别？"></a>position:absolute / fixed 有什么区别？</h3><p><strong>经典问题</strong>：</p>
<ul>
<li>绝对定位 <code>absolute</code>，会优先查找父级定位为 <code>absolute</code> 或 <code>relative</code>的进行定位，如果父级没有，找上级，那么最终就会根据 <code>body</code>进行定位，它和 <code>fixed</code>一样，也是脱离了文档流。</li>
<li><code>fixed</code>相对于屏幕（viewport）进行定位</li>
</ul>
<p><strong>层叠问题</strong> ，因为默认会根据先后顺序显示，因此会有覆盖情况，此时，可以通过设计 <code>z-index</code> 解决，权重越大，优先显示。</p>
<h3 id="display-inline-block-的间隙"><a href="#display-inline-block-的间隙" class="headerlink" title="display:inline-block 的间隙"></a>display:inline-block 的间隙</h3><ul>
<li>原因：字符间距</li>
<li>解决：消灭字符（把标签写在一起或者添加注释）或者消灭间距（将<code>font-size</code>设为0）</li>
</ul>
<h3 id="如何清除浮动？为什么要清除浮动？"><a href="#如何清除浮动？为什么要清除浮动？" class="headerlink" title="如何清除浮动？为什么要清除浮动？"></a>如何清除浮动？为什么要清除浮动？</h3><p>原因：浮动的元素不会占据父元素的布局空间，也就是父级元素不会管浮动元素，有可能浮动元素会超出父元素，从而对其它元素产生影响。</p>
<p><strong>经典问题</strong>：</p>
<p>清除浮动的方式</p>
<p>① 当我们设置为 float 后，会将元素设为 BFC，接管自己的宽高，因此我们也可以让父级元素设置为 BFC，来接管自己的宽高。</p>
<p>初始状态：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528174749689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200528174749689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a><br>在父级元素设置 <code>overflow: auto/hidden;</code></p>
<pre><code>CPP
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;清楚浮动&lt;/title&gt;
    &lt;style&gt;
        .container&#123;
            background: red;
            width: 400px;
            overflow: auto;
            margin: 10px;
        &#125;
        .p1&#123;
            background: pink;
            float: left;
            width: 200px;
            height: 50px;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;span&gt;xxxxxx&lt;/span&gt;
        &lt;span class=&quot;p1&quot;&gt;float&lt;/span&gt;
        &lt;span class=&quot;p1&quot;&gt;float&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;container&quot; style=&quot;height: 200px; background: blue;&quot;&gt;
        &lt;p&gt;第一行&lt;/p&gt;
        &lt;p&gt;第二行&lt;/p&gt;
        &lt;p&gt;第三行&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>最终状态效果图如下：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528174958468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200528174958468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></a></p>
<p>② 由于 float 不脱离文档流（不会影响其它元素布局），那么就可以使得元素刚好到达下面位置。就可以通过其它元素将父级撑起来，当父级刚好撑到下方位置时，就可以将浮动清除掉。</p>
<p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528175222135.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200528175222135.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<pre><code>CPP
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;清楚浮动&lt;/title&gt;
    &lt;style&gt;
        .container&#123;
            background: red;
            width: 400px;
        &#125;
        .p1&#123;
            background: pink;
            float: left;
            width: 200px;
            height: 50px;
        &#125;
        .removeFloat::after&#123;
            content: &#39;aaa&#39;;
            clear: both; /*保证当前元素左右没有浮动元素*/
            display: block;
            height: 0;
            visibility: hidden;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container removeFloat&quot;&gt;
        &lt;span&gt;xxxxxx&lt;/span&gt;
        &lt;span class=&quot;p1&quot;&gt;float&lt;/span&gt;
        &lt;span class=&quot;p1&quot;&gt;float&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;container&quot; style=&quot;height: 200px; background: blue;&quot;&gt;
        &lt;p&gt;第一行&lt;/p&gt;
        &lt;p&gt;第二行&lt;/p&gt;
        &lt;p&gt;第三行&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>经典清除浮动方式，效果图如下：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528175659432.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200528175659432.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<h3 id="如何适配移动端页面？"><a href="#如何适配移动端页面？" class="headerlink" title="如何适配移动端页面？"></a>如何适配移动端页面？</h3><p>主要方法：隐藏 + 折行 + 自适应空间（rem：通过html的字体大小（即 <code>font-size</code>）来确定元素大小，但不太精确 / viewport：通过 js或手工 确定整个界面放到多大 / media query：媒体查询，根据不同的设备来匹配不同的样式）</p>
<h2 id="效果属性（CSS最出彩的一部分）"><a href="#效果属性（CSS最出彩的一部分）" class="headerlink" title="效果属性（CSS最出彩的一部分）"></a>效果属性（CSS最出彩的一部分）</h2><h3 id="box-shadow"><a href="#box-shadow" class="headerlink" title="box-shadow"></a>box-shadow</h3><p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528195555152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200528195555152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a><br>属性值介绍：前两个是偏移量，第三个是模糊区域度，第四个是拓展区域度，第五个是颜色（最后一个是透明度）</p>
<pre><code>CPP
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2);
</code></pre>
<h3 id="text-shadow"><a href="#text-shadow" class="headerlink" title="text-shadow"></a>text-shadow</h3><ul>
<li>立体感</li>
<li>印刷品质感</li>
</ul>
<h3 id="border-radius"><a href="#border-radius" class="headerlink" title="border-radius"></a>border-radius</h3><ul>
<li>圆角矩形</li>
<li>圆形</li>
<li>半圆 / 扇形</li>
<li>一些奇怪的角角</li>
</ul>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;border-radius&lt;/title&gt;
    &lt;style&gt;
        .container&#123;
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>展示效果如下：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528204159194.png"><img src="https://img-blog.csdnimg.cn/20200528204159194.png" alt="img"></a></p>
<h3 id="background"><a href="#background" class="headerlink" title="background"></a>background</h3><ul>
<li><p>纹理、图案</p>
</li>
<li><p>渐变</p>
</li>
<li><p>雪碧图动画</p>
</li>
<li><p>背景图尺寸适应</p>
<p><img src="https://img-blog.csdnimg.cn/20200528204345120.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></p>
<h3 id="clip-path"><a href="#clip-path" class="headerlink" title="clip-path"></a>clip-path</h3></li>
<li><p>对容器进行裁剪</p>
</li>
<li><p>常见几何图形</p>
</li>
<li><p>自定义路径</p>
</li>
</ul>
<p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200528213618716.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200528213618716.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<h3 id="3D-transform"><a href="#3D-transform" class="headerlink" title="3D-transform"></a>3D-transform</h3><pre><code>CPP
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;3D-transform&lt;/title&gt;
    &lt;style&gt;
        .container&#123;
            margin: 50px;
            padding: 10px;
            border: 1px solid red;
            width: 200px;
            height: 200px;
            position: relative;
            perspective: 500px;
        &#125;
        #cube&#123;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transform: translateZ(-100px);
            transition: transform 1s;
        &#125;
        #cube:hover&#123;
            transform: translateZ(-100px) rotateX(90deg) rotateY(90deg);
        &#125;
        #cube div&#123;
            width: 200px;
            height: 200px;
            position: absolute;
            line-height: 200px;
            font-size: 50px;
            text-align: center;
        &#125;
        .front&#123;
            background: rgba(255, 0, 0, .3);
            transform: translateZ(100px);
        &#125;
        .back&#123;
            background: rgba(0, 255, 0, .3);
            transform: translateZ(-100px) rotateY(180deg);
        &#125;
        .left&#123;
            background: rgba(0, 0, 255, .3);
            transform: translateX(-100px) rotateY(-90deg);
        &#125;
        .right&#123;
            background: rgba(255, 255, 0, .3);
            transform: translateX(100px) rotateY(90deg);
        &#125;
        .top&#123;
            background: rgba(255, 0, 255, .3);
            transform: translateY(-100px) rotateX(-90deg);
        &#125;
        .bottom&#123;
            background: rgba(0, 255, 255, .3);
            transform: translateY(100px) rotateX(90deg);
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div id=&quot;cube&quot;&gt;
            &lt;div class=&quot;front&quot;&gt;1&lt;/div&gt;
            &lt;div class=&quot;back&quot;&gt;2&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;3&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;4&lt;/div&gt;
            &lt;div class=&quot;top&quot;&gt;5&lt;/div&gt;
            &lt;div class=&quot;bottom&quot;&gt;6&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>展示效果图如下：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200529083411818.gif#pic_center"><img src="https://img-blog.csdnimg.cn/20200529083411818.gif#pic_center" alt="img"></a></p>
<h2 id="CSS-面试真题-2"><a href="#CSS-面试真题-2" class="headerlink" title="CSS 面试真题"></a>CSS 面试真题</h2><h3 id="如何用div画一个-xxx"><a href="#如何用div画一个-xxx" class="headerlink" title="如何用div画一个 xxx"></a>如何用div画一个 xxx</h3><ul>
<li>box-shadow 无限投影</li>
<li>::before</li>
<li>::after</li>
</ul>
<h3 id="如何产生不占空间的边框"><a href="#如何产生不占空间的边框" class="headerlink" title="如何产生不占空间的边框"></a>如何产生不占空间的边框</h3><ul>
<li>box-shadow</li>
<li>outline</li>
</ul>
<h3 id="如何实现圆形元素（头像）"><a href="#如何实现圆形元素（头像）" class="headerlink" title="如何实现圆形元素（头像）"></a>如何实现圆形元素（头像）</h3><ul>
<li>border-radius:50%</li>
</ul>
<h3 id="如何实现iOS图标的圆角"><a href="#如何实现iOS图标的圆角" class="headerlink" title="如何实现iOS图标的圆角"></a>如何实现iOS图标的圆角</h3><p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200529084619993.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200529084619993.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<ul>
<li>clip-path：(svg)</li>
</ul>
<h3 id="如何实现半圆、扇形等图形"><a href="#如何实现半圆、扇形等图形" class="headerlink" title="如何实现半圆、扇形等图形"></a>如何实现半圆、扇形等图形</h3><ul>
<li>border-radius 组合：有无边框、边框粗细、圆角半径</li>
</ul>
<h3 id="如何实现背景图居中显示-不重复-改变大小"><a href="#如何实现背景图居中显示-不重复-改变大小" class="headerlink" title="如何实现背景图居中显示 / 不重复 / 改变大小"></a>如何实现背景图居中显示 / 不重复 / 改变大小</h3><ul>
<li>background-position</li>
<li>background-repeat</li>
<li>background-size（cover / contain）</li>
</ul>
<h3 id="如何平移-放大一个元素"><a href="#如何平移-放大一个元素" class="headerlink" title="如何平移 / 放大一个元素"></a>如何平移 / 放大一个元素</h3><ul>
<li>transform:translateX(100px)</li>
<li>transform:scale(2)</li>
<li>transform本身与动画没有关系</li>
</ul>
<h3 id="如何实现3D效果"><a href="#如何实现3D效果" class="headerlink" title="如何实现3D效果"></a>如何实现3D效果</h3><ul>
<li>perspective:500px（指定透视角度）</li>
<li>transform-style:preserve-3d;（3d效果）</li>
<li>transform:translate rotate …</li>
</ul>
<h2 id="CSS-动画"><a href="#CSS-动画" class="headerlink" title="CSS 动画"></a>CSS 动画</h2><h3 id="动画的原理"><a href="#动画的原理" class="headerlink" title="动画的原理"></a>动画的原理</h3><ul>
<li>视觉暂留作用：就是说看到的画面，会在脑海中保留一段片段</li>
<li>画面逐渐变化</li>
</ul>
<h3 id="动画的作用"><a href="#动画的作用" class="headerlink" title="动画的作用"></a>动画的作用</h3><ul>
<li>愉悦感</li>
<li>引起注意</li>
<li>反馈（输入密码错误时，登录框晃动）</li>
<li>掩饰</li>
</ul>
<h3 id="CSS中动画的类型"><a href="#CSS中动画的类型" class="headerlink" title="CSS中动画的类型"></a>CSS中动画的类型</h3><ul>
<li>transition 补间动画（从一个状态到另一个状态，状态切换之间是有动画的）</li>
<li>keyframe 关键帧动画（指定的每一个状态就是一个关键帧）</li>
<li>逐帧动画（跳动）</li>
</ul>
<h3 id="transition-补间动画"><a href="#transition-补间动画" class="headerlink" title="transition 补间动画"></a>transition 补间动画</h3><pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;transition补间动画&lt;/title&gt;
    &lt;style&gt;
        .container&#123;
            width: 100px;
            height: 100px;
            background: red;
            transition: width 1s, background 2s;
        &#125;
        .container:hover&#123;
            width: 300px;
            background: blue;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>展示效果如下：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200529105730631.gif#pic_center"><img src="https://img-blog.csdnimg.cn/20200529105730631.gif#pic_center" alt="img"></a></p>
<h3 id="动画进度与时间的关系"><a href="#动画进度与时间的关系" class="headerlink" title="动画进度与时间的关系"></a>动画进度与时间的关系</h3><p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200529105848275.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200529105848275.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a><br>例子：<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200529110102399.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200529110102399.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a><br><a target="_blank" rel="noopener" href="https://matthewlein.com/tools/ceaser">推荐：动画进度与时间关系模拟网站</a></p>
<h3 id="关键帧动画"><a href="#关键帧动画" class="headerlink" title="关键帧动画"></a>关键帧动画</h3><ul>
<li>相当于多个补间动画</li>
<li>与元素状态的变化无关</li>
<li>定义更加灵活</li>
</ul>
<pre><code>CODE
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;keyframe关键帧动画&lt;/title&gt;
    &lt;style&gt;
        .container&#123;
            width: 100px;
            height: 100px;
            background: red;
            animation: run 1s;
            animation-direction: reverse;
            animation-iteration-count: infinite;
            /*animation-fill-mode: forwards;*/
            /*animation-play-state: paused;*/
        &#125;
        @keyframes run &#123;
            0%&#123;
                width: 100px;
            &#125;
            100%&#123;
                width: 800px;
            &#125;
        &#125;
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>展示效果：</p>
<p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200529142723152.gif#pic_center"><img src="https://yangchaoyi.vip/img/loading.gif" alt="img"></a></p>
<h3 id="逐帧动画"><a href="#逐帧动画" class="headerlink" title="逐帧动画"></a>逐帧动画</h3><ul>
<li>属于关键帧动画特殊的一种</li>
<li>适用于无法补间计算的动画</li>
<li>资源较大</li>
<li>使用 steps() （设置关键帧之间有几个画面，一般设置为1,也可以说是将关键帧去掉补间）</li>
</ul>
<p>例如：一个动物跑动的过程，通过将每个动作的图片逐帧显示，形成动画的感觉。<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200529143916273.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200529143916273.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<h2 id="CSS-面试真题-3"><a href="#CSS-面试真题-3" class="headerlink" title="CSS 面试真题"></a>CSS 面试真题</h2><h3 id="CSS-动画的实现方式有几种"><a href="#CSS-动画的实现方式有几种" class="headerlink" title="CSS 动画的实现方式有几种"></a>CSS 动画的实现方式有几种</h3><ul>
<li>transition</li>
<li>keyframes（animation）</li>
</ul>
<h3 id="过渡动画和关键帧动画的区别"><a href="#过渡动画和关键帧动画的区别" class="headerlink" title="过渡动画和关键帧动画的区别"></a>过渡动画和关键帧动画的区别</h3><ul>
<li>过渡动画需要有状态变化</li>
<li>关键帧动画不需要状态变化</li>
<li>关键帧动画能控制更精细</li>
</ul>
<h3 id="如何实现逐帧动画"><a href="#如何实现逐帧动画" class="headerlink" title="如何实现逐帧动画"></a>如何实现逐帧动画</h3><ul>
<li>使用关键帧动画</li>
<li>去掉补间（steps）</li>
</ul>
<h3 id="CSS动画的性能"><a href="#CSS动画的性能" class="headerlink" title="CSS动画的性能"></a>CSS动画的性能</h3><ul>
<li>性能不坏</li>
<li>部分情况下优于JS</li>
<li>但JS可以做的更好</li>
<li>部分高危属性（例如 <code>box-shadow</code>等）</li>
</ul>
<h2 id="CSS-预处理器"><a href="#CSS-预处理器" class="headerlink" title="CSS 预处理器"></a>CSS 预处理器</h2><ul>
<li>基于CSS的另一种语言</li>
<li>通过工具编译为CSS</li>
<li>添加了很多CSS不具备的特性</li>
<li>能提升CSS文件的组织</li>
</ul>
<p>常见的有 <code>less</code>（基于node写的，编译比较快，入门简单）和 <code>sass</code>（基于<code>Ruby</code>写的）</p>
<ul>
<li>嵌套 反映层级和约束</li>
<li>变量和计算 减少重重复代码</li>
<li>Extend 和 Mxxin 代码片段</li>
<li>循环 适用于复杂有规律的样式</li>
<li>import CSS 文件模块化</li>
</ul>
<h3 id="less嵌套"><a href="#less嵌套" class="headerlink" title="less嵌套"></a>less嵌套</h3><p>全局安装 <code>less</code></p>
<pre><code>CPP
npm install less -g
</code></pre>
<p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200529155848221.png"><img src="https://yangchaoyi.vip/img/loading.gif" alt="img"></a><br>创建一个 <code>test.less</code> 文件</p>
<pre><code>CPP
body&#123;
    padding: 0;
    margin: 0;
&#125;
.wrapper&#123;
    background: white;
    .nav&#123;
        font-size: 12px;
    &#125;
    .content&#123;
        font-size: 14px;
        &amp;:hover&#123;
            background: red;
        &#125;
    &#125;
&#125;
</code></pre>
<p>在该文件处调用终端，执行以下命令：</p>
<pre><code>CPP
lessc test.less
</code></pre>
<p>输出结果：</p>
<p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200529160202644.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://yangchaoyi.vip/img/loading.gif" alt="img"></a></p>
<p>执行如下命令，输出到 <code>test.css</code> 文件中</p>
<pre><code>CSS
lessc test.less &gt; test.css
</code></pre>
<p>查看 <code>test.css</code> 文件，得到如下结果：</p>
<pre><code>CSS
body &#123;
  padding: 0;
  margin: 0;
&#125;
.wrapper &#123;
  background: white;
&#125;
.wrapper .nav &#123;
  font-size: 12px;
&#125;
.wrapper .content &#123;
  font-size: 14px;
&#125;
.wrapper .content:hover &#123;
  background: red;
&#125;
</code></pre>
<h3 id="sass嵌套"><a href="#sass嵌套" class="headerlink" title="sass嵌套"></a>sass嵌套</h3><p>全局安装 <code>sass</code></p>
<pre><code>CPP
cnpm install node-sass -g
</code></pre>
<p>创建一个 <code>test.scss</code> 文件</p>
<pre><code>CSS
body&#123;
    padding: 0;
    margin: 0;
&#125;
.wrapper&#123;
    background: white;
    .nav&#123;
        font-size: 12px;
    &#125;
    .content&#123;
        font-size: 14px;
        &amp;:hover&#123;
            background: red;
        &#125;
    &#125;
&#125;
</code></pre>
<p>执行如下命令，查看输出结果：</p>
<pre><code>CSS
node-sass test.scss
</code></pre>
<p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200529162015247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200529162015247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a><br>执行如下命令，输出到 <code>test-scss.css</code> 文件中</p>
<pre><code>CSS
node-sass test.scss &gt; test-scss.css
</code></pre>
<p>查看 <code>test-scss.css</code> 文件，得到如下结果：</p>
<pre><code>CSS
body &#123;
  padding: 0;
  margin: 0; &#125;

.wrapper &#123;
  background: white; &#125;
  .wrapper .nav &#123;
    font-size: 12px; &#125;
  .wrapper .content &#123;
    font-size: 14px; &#125;
    .wrapper .content:hover &#123;
      background: red; &#125;
</code></pre>
<p>从以上代码来看，sass嵌套会保留原来嵌套样式，对于css观赏性来说，并不是我们特别想要的，于是我们可以执行如下命令，更改输出样式：</p>
<pre><code>CSS
node-sass --output-style expanded test.scss &gt; test-scss.css
</code></pre>
<p>输出结果就和less嵌套一样了，读者可以自己跑一遍！</p>
<h3 id="less变量"><a href="#less变量" class="headerlink" title="less变量"></a>less变量</h3><p>创建 <code>variable-less.less</code> 文件</p>
<pre><code>CSS
@fontSize: 12px;
@bgColor: red;

body&#123;
    padding: 0;
    margin: 0;
&#125;
.wrapper&#123;
    background: lighten(@bgColor,40%);
    .nav&#123;
        font-size: @fontSize;
    &#125;
    .content&#123;
        font-size: @fontSize+2px;
        &amp;:hover&#123;
            background: @bgColor;
        &#125;
    &#125;
&#125;
</code></pre>
<p>创建 <code>variable-less.css</code> 文件，执行如下命令：</p>
<pre><code>CSS
lessc variable-less.less &gt; variable-less.css
</code></pre>
<p>可以得到如下代码：</p>
<pre><code>CSS
body &#123;
  padding: 0;
  margin: 0;
&#125;
.wrapper &#123;
  background: #ffcccc;
&#125;
.wrapper .nav &#123;
  font-size: 12px;
&#125;
.wrapper .content &#123;
  font-size: 14px;
&#125;
.wrapper .content:hover &#123;
  background: red;
&#125;
</code></pre>
<h3 id="sass变量"><a href="#sass变量" class="headerlink" title="sass变量"></a>sass变量</h3><p>类似less变量，只需要将 <code>@</code> 改为 <code>$</code> 即可，因为 <code>less</code> 变量命名这样做，是更贴近CSS。而 <code>sass</code>是为了区别CSS。</p>
<h3 id="less-mixin"><a href="#less-mixin" class="headerlink" title="less mixin"></a>less mixin</h3><p>创建 <code>mixin.less</code> 文件，复制如下代码：</p>
<pre><code>CSS
@fontSize: 12px;
@bgColor: red;

.block(@fontSize)&#123;
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
&#125;
body&#123;
    padding: 0;
    margin: 0;
&#125;
.wrapper&#123;
    background: lighten(@bgColor,40%);
    .nav&#123;
        .block(@fontSize);
    &#125;
    .content&#123;
        .block(@fontSize+2px);
        &amp;:hover&#123;
            background: @bgColor;
        &#125;
    &#125;
&#125;
</code></pre>
<p>创建 <code>mixin-less.css</code> 文件，执行如下代码：</p>
<pre><code>CSS
lessc mixin.less &gt; mixin-less.css
</code></pre>
<p>查看<code>mixin-less.css</code> 文件，发现 <code>.block</code> 没有了，在CSS内部就完成了样式复用。</p>
<pre><code>CSS
body &#123;
  padding: 0;
  margin: 0;
&#125;
.wrapper &#123;
  background: #ffcccc;
&#125;
.wrapper .nav &#123;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
&#125;
.wrapper .content &#123;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
&#125;
.wrapper .content:hover &#123;
  background: red;
&#125;
</code></pre>
<h3 id="sass-mixin"><a href="#sass-mixin" class="headerlink" title="sass mixin"></a>sass mixin</h3><p>创建 <code>mixin.scss</code> 文件，复制如下代码：</p>
<pre><code>CSS
$fontSize: 12px;
$bgColor: red;

@mixin block($fontSize)&#123;
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
&#125;
body&#123;
    padding: 0;
    margin: 0;
&#125;
.wrapper&#123;
    background: lighten($bgColor,40%);
    .nav&#123;
        @include block($fontSize);
    &#125;
    .content&#123;
        @include block($fontSize+2px);
        &amp;:hover&#123;
            background: $bgColor;
        &#125;
    &#125;
&#125;
</code></pre>
<p>创建 <code>mixin-sass.css</code> 文件，执行如下代码：</p>
<pre><code>CSS
node-sass --output-style expanded mixin.scss &gt; mixin-sass.css
</code></pre>
<p>查看<code>mixin-sass.css</code> 文件，发现 <code>.block</code> 没有了，在CSS内部就完成了样式复用。</p>
<pre><code>CSS
body &#123;
  padding: 0;
  margin: 0;
&#125;

.wrapper &#123;
  background: #ffcccc;
&#125;

.wrapper .nav &#123;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
&#125;

.wrapper .content &#123;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
&#125;

.wrapper .content:hover &#123;
  background: red;
&#125;
</code></pre>
<p>总结：从上文对比来看，sass mixin 除了调用变量符号要换为 <code>$</code> 外，抽离公共样式需要使用 <code>@mixin</code> ，此外，调用时还需要使用 <code>@include</code> 。</p>
<p>那么，mixin还能做什么呢？</p>
<p>例如，对于布局方面，我们在上文提到了清楚浮动的方式，那么，我们就可以将这段样式进行复用，只需要在需要的元素处引用即可。</p>
<h3 id="less-extend"><a href="#less-extend" class="headerlink" title="less extend"></a>less extend</h3><p>上文提到过的，使用过 less mixin 抽离之后，我们可以得到如下代码，但是呢，又会有一个小问题，就是我们会有重复样式代码。在生产环境下，就会有大量这样的形式出现，这就会影响到我们的CSS体积了。<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/2020052917481580.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://yangchaoyi.vip/img/loading.gif" alt="img"></a><br>一种比较好的方式，如下，我们再讲公共样式代码进行抽离，这显然会降低我们的CSS体积。<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200529174929659.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://yangchaoyi.vip/img/loading.gif" alt="img"></a></p>
<p>因此，extend就发挥了它的作用</p>
<p>创建 <code>extend-less.less</code> 文件，复制如下代码：</p>
<pre><code>CSS
@fontSize: 12px;
@bgColor: red;

.block&#123;
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
&#125;
body&#123;
    padding: 0;
    margin: 0;
&#125;
.wrapper&#123;
    background: lighten(@bgColor,40%);
    .nav&#123;
        &amp;:extend(.block);
    &#125;
    .content:extend(.block)&#123;
        &amp;:hover&#123;
            background: @bgColor;
        &#125;
    &#125;
&#125;
</code></pre>
<p>创建 <code>extend-less.css</code> 文件，执行如下代码：</p>
<pre><code>CSS
lessc extend-less.less &gt; extend-less.css
</code></pre>
<p>查看 <code>extend-less.css</code> 文件，发现代码体积相对减少了。</p>
<pre><code>CSS
.block,
.wrapper .nav,
.wrapper .content &#123;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
&#125;
body &#123;
  padding: 0;
  margin: 0;
&#125;
.wrapper &#123;
  background: #ffcccc;
&#125;
.wrapper .content:hover &#123;
  background: red;
&#125;
</code></pre>
<p>总结：mixin 和 extend 区别， mixin 能处理一些复杂逻辑，比如添加变量，但会导致体积增大问题。而 extend的话，是将选择器提取出来，更加简单，不适合处理复杂逻辑，能将体积进行一定减少。</p>
<h3 id="sass-extend"><a href="#sass-extend" class="headerlink" title="sass extend"></a>sass extend</h3><p>创建 <code>extend-sass.scss</code> 文件，复制如下代码：</p>
<pre><code>CSS
$fontSize: 12px;
$bgColor: red;

.block&#123;
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
&#125;
body&#123;
    padding: 0;
    margin: 0;
&#125;
.wrapper&#123;
    background: lighten($bgColor,40%);
    .nav&#123;
        @extend .block;
    &#125;
    .content&#123;
        @extend .block;
        &amp;:hover&#123;
            background: $bgColor;
        &#125;
    &#125;
&#125;
</code></pre>
<p>创建 <code>extend-sass.css</code> 文件，执行如下代码：</p>
<pre><code>CSS
node-sass --output-style expanded extend-sass.scss &gt; extend-sass.css
</code></pre>
<p>查看 <code>extend-sass.css</code> 文件，发现代码体积相对减少了。</p>
<pre><code>CSS
.block, .wrapper .nav, .wrapper .content &#123;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
&#125;

body &#123;
  padding: 0;
  margin: 0;
&#125;

.wrapper &#123;
  background: #ffcccc;
&#125;

.wrapper .content:hover &#123;
  background: red;
&#125;
</code></pre>
<h3 id="less-loop"><a href="#less-loop" class="headerlink" title="less loop"></a>less loop</h3><p>创建 <code>loop-less.less</code> 文件，复制如下代码</p>
<pre><code>CSS
.gen-col(@n) when (@n &gt; 0)&#123;
    .gen-col(@n - 1);
    .col-@&#123;n&#125;&#123;
        width: 1000px/12*@n;
    &#125;
&#125;

.gen-col(12);
</code></pre>
<p>创建 <code>loop-less.css</code> 文件，执行如下代码：</p>
<pre><code>CSS
lessc loop-less.less &gt; loop-less.css
</code></pre>
<p>查看 <code>loop-less.css</code> 文件，发现有12个样式</p>
<pre><code>CSS
.col-1 &#123;
  width: 83.33333333px;
&#125;
.col-2 &#123;
  width: 166.66666667px;
&#125;
.col-3 &#123;
  width: 250px;
&#125;
.col-4 &#123;
  width: 333.33333333px;
&#125;
.col-5 &#123;
  width: 416.66666667px;
&#125;
.col-6 &#123;
  width: 500px;
&#125;
.col-7 &#123;
  width: 583.33333333px;
&#125;
.col-8 &#123;
  width: 666.66666667px;
&#125;
.col-9 &#123;
  width: 750px;
&#125;
.col-10 &#123;
  width: 833.33333333px;
&#125;
.col-11 &#123;
  width: 916.66666667px;
&#125;
.col-12 &#123;
  width: 1000px;
&#125;
</code></pre>
<h3 id="sass-loop"><a href="#sass-loop" class="headerlink" title="sass loop"></a>sass loop</h3><p>创建 <code>loop-sass.scss</code> 文件，复制如下代码：</p>
<pre><code>CSS
@mixin gen-col($n)&#123;
    @if $n &gt; 0 &#123;
        @include gen-col($n - 1);
        .col-#&#123;$n&#125;&#123;
            width: 1000px/12*$n;
        &#125;
    &#125;
&#125;

@include gen-col(12);
</code></pre>
<p>创建 <code>loop-sass.css</code>，执行如下代码：</p>
<pre><code>CSS
node-sass --output-style expanded loop-sass.scss &gt; loop-sass.css
</code></pre>
<p>查看 <code>loop-sass.css</code> 文件，发现有12个样式</p>
<pre><code>CSS
.col-1 &#123;
  width: 83.33333px;
&#125;

.col-2 &#123;
  width: 166.66667px;
&#125;

.col-3 &#123;
  width: 250px;
&#125;

.col-4 &#123;
  width: 333.33333px;
&#125;

.col-5 &#123;
  width: 416.66667px;
&#125;

.col-6 &#123;
  width: 500px;
&#125;

.col-7 &#123;
  width: 583.33333px;
&#125;

.col-8 &#123;
  width: 666.66667px;
&#125;

.col-9 &#123;
  width: 750px;
&#125;

.col-10 &#123;
  width: 833.33333px;
&#125;

.col-11 &#123;
  width: 916.66667px;
&#125;

.col-12 &#123;
  width: 1000px;
&#125;
</code></pre>
<p>上述版本代码或许是挺复杂的，好在 <code>sass</code>提供了for循环，见如下代码：</p>
<pre><code>CSS
@for $i from 1 through 12 &#123;
    .col-#&#123;$i&#125; &#123;
        width: 1000px/12*$i;
    &#125;
&#125;
</code></pre>
<h3 id="less-import"><a href="#less-import" class="headerlink" title="less import"></a>less import</h3><p>创建 <code>import-less.less</code> 文件，复制如下代码：</p>
<pre><code>CSS
@import &quot;./mixin&quot;;
@import &quot;./variable-less&quot;;
</code></pre>
<p>创建 <code>import-less.css</code> 文件，执行如下代码：</p>
<pre><code>CSS
lessc import-less.less &gt; import-less.css
</code></pre>
<p>查看 <code>import-less.less</code> 文件</p>
<pre><code>CSS
body &#123;
  padding: 0;
  margin: 0;
&#125;
.wrapper &#123;
  background: #ffcccc;
&#125;
.wrapper .nav &#123;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
&#125;
.wrapper .content &#123;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
&#125;
.wrapper .content:hover &#123;
  background: red;
&#125;
body &#123;
  padding: 0;
  margin: 0;
&#125;
.wrapper &#123;
  background: #ffcccc;
&#125;
.wrapper .nav &#123;
  font-size: 12px;
&#125;
.wrapper .content &#123;
  font-size: 14px;
&#125;
.wrapper .content:hover &#123;
  background: red;
&#125;
</code></pre>
<h3 id="sass-import"><a href="#sass-import" class="headerlink" title="sass import"></a>sass import</h3><p>语法上没有什么变化，注意符号是 <code>$</code></p>
<h3 id="CSS预处理器框架"><a href="#CSS预处理器框架" class="headerlink" title="CSS预处理器框架"></a>CSS预处理器框架</h3><ul>
<li>Less - Lesshat / EST（<a target="_blank" rel="noopener" href="http://ecomfe.github.io/est/">官网</a>）</li>
<li>SASS - Compass （<a target="_blank" rel="noopener" href="http://compass-style.org/">官网</a>，将有兼容性问题的属性会进行封装成mixin，直接调用就好）</li>
<li>提供现成的 mixin</li>
<li>类似 JS 类库 封装常用功能</li>
</ul>
<h2 id="CSS-面试真题-4"><a href="#CSS-面试真题-4" class="headerlink" title="CSS 面试真题"></a>CSS 面试真题</h2><h3 id="常见的CSS预处理器"><a href="#常见的CSS预处理器" class="headerlink" title="常见的CSS预处理器"></a>常见的CSS预处理器</h3><ul>
<li>Less（Node.js）</li>
<li>Sass（Ruby 有Node版本）</li>
</ul>
<h3 id="预处理器的作用"><a href="#预处理器的作用" class="headerlink" title="预处理器的作用"></a>预处理器的作用</h3><ul>
<li>帮助更好地组织CSS代码</li>
<li>提高代码复用率</li>
<li>提升可维护性</li>
</ul>
<h3 id="预处理器的能力"><a href="#预处理器的能力" class="headerlink" title="预处理器的能力"></a>预处理器的能力</h3><ul>
<li>嵌套 反映层级和约束</li>
<li>变量和计算 减少重重复代码</li>
<li>Extend 和 Mxxin 代码片段</li>
<li>循环 适用于复杂有规律的样式（网格系统）</li>
<li>import CSS 文件模块化（按需拆解CSS文件）</li>
</ul>
<h3 id="预处理器的优缺点"><a href="#预处理器的优缺点" class="headerlink" title="预处理器的优缺点"></a>预处理器的优缺点</h3><ul>
<li>优点：提高代码复用率和可维护性</li>
<li>缺点：需要引入编译过程 有学习成本</li>
</ul>
<h2 id="Bootstrap"><a href="#Bootstrap" class="headerlink" title="Bootstrap"></a>Bootstrap</h2><ul>
<li>一个CSS框架</li>
<li>twitter 出品</li>
<li>提供通用基础样式</li>
</ul>
<h3 id="Bootstrap-4"><a href="#Bootstrap-4" class="headerlink" title="Bootstrap 4"></a>Bootstrap 4</h3><ul>
<li>兼容IE10+</li>
<li>使用flexbox布局</li>
<li>抛弃Nomalize.css</li>
<li>提供布局 和 reboot版本</li>
<li>（<a target="_blank" rel="noopener" href="https://getbootstrap.com/">官网</a>，用sass写）</li>
<li>可用于后台管理系统</li>
</ul>
<h3 id="Bootstrap-JS组件"><a href="#Bootstrap-JS组件" class="headerlink" title="Bootstrap JS组件"></a>Bootstrap JS组件</h3><p>用于组件交互</p>
<ul>
<li>dropdown（下拉）</li>
<li>modal（弹窗）</li>
<li>…</li>
</ul>
<p>基于jquery写的，同时，依赖第三方库 Popper.js和 bootstrap.js</p>
<p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200530081512499.png"><img src="https://img-blog.csdnimg.cn/20200530081512499.png" alt="img"></a></p>
<p>如上图，第二个js文件包含了 Popper.js</p>
<p>使用方式：</p>
<ul>
<li>基于 data-*属性</li>
<li>基于 JS API</li>
</ul>
<h3 id="Bootstrap-响应式布局"><a href="#Bootstrap-响应式布局" class="headerlink" title="Bootstrap 响应式布局"></a>Bootstrap 响应式布局</h3><p>非常精华的部分</p>
<p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200530082022915.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200530082022915.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<h3 id="Bootstrap-定制方法"><a href="#Bootstrap-定制方法" class="headerlink" title="Bootstrap 定制方法"></a>Bootstrap 定制方法</h3><ul>
<li>使用CSS同名类覆盖（操作简单但）</li>
<li>修改sass源码重新构建</li>
<li>引用scss源文件 修改变量（推荐使用，干净）</li>
</ul>
<h2 id="CSS-面试真题-5"><a href="#CSS-面试真题-5" class="headerlink" title="CSS 面试真题"></a>CSS 面试真题</h2><h3 id="Bootstrap的优缺点"><a href="#Bootstrap的优缺点" class="headerlink" title="Bootstrap的优缺点"></a>Bootstrap的优缺点</h3><ul>
<li>优点：CSS代码结构合理，现成的样式可以直接使用</li>
<li>缺点：定制较为繁琐 体积大</li>
</ul>
<h3 id="Bootstrap如何实现响应式布局"><a href="#Bootstrap如何实现响应式布局" class="headerlink" title="Bootstrap如何实现响应式布局"></a>Bootstrap如何实现响应式布局</h3><ul>
<li>原理：通过 media query 设置不同分辨率的class</li>
<li>使用：为不同分辨率选择不同的网格class</li>
</ul>
<h3 id="如何基于Bootstrap-定制自己的样式"><a href="#如何基于Bootstrap-定制自己的样式" class="headerlink" title="如何基于Bootstrap 定制自己的样式"></a>如何基于Bootstrap 定制自己的样式</h3><ul>
<li>使用CSS同名类覆盖（操作简单但）</li>
<li>修改sass源码重新构建（需要了解Bootstrap 结构）</li>
<li>引用scss源文件 修改变量（按需使用，控制体积，推荐使用，干净，但需要了解结构）</li>
</ul>
<h2 id="CSS-工程化"><a href="#CSS-工程化" class="headerlink" title="CSS 工程化"></a>CSS 工程化</h2><p>关注几个事情：组织、优化、构建、维护</p>
<h3 id="PostCSS"><a href="#PostCSS" class="headerlink" title="PostCSS"></a>PostCSS</h3><ul>
<li>将 CSS 解析成 CSS，和预处理器没太多区别。</li>
<li>本身只有解析能力</li>
<li>各种神奇的特性全靠插件</li>
<li>目前至少有200多个插件</li>
</ul>
<p>常见：</p>
<ul>
<li>import 模块合并</li>
<li>autoprefixer 自动加前缀</li>
<li>cssnano 压缩代码</li>
<li>cssnext 使用CSS新特性</li>
<li>precss 变量、mixin、循环等</li>
</ul>
<p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/2020053009080083.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/2020053009080083.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<h3 id="PostCSS插件的使用"><a href="#PostCSS插件的使用" class="headerlink" title="PostCSS插件的使用"></a>PostCSS插件的使用</h3><p>全局安装 <code>postcss-cli</code></p>
<pre><code>CSS
npm install postcss-cli -g
</code></pre>
<p>在 <code>postcss.config.js</code> 文件进行配置<br><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/2020053009210982.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/2020053009210982.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<h3 id="cssnext"><a href="#cssnext" class="headerlink" title="cssnext"></a>cssnext</h3><p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200530092327268.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200530092327268.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<h3 id="precss"><a href="#precss" class="headerlink" title="precss"></a>precss</h3><ul>
<li>变量（使用和 sass 几乎一样）</li>
<li>条件（if）</li>
<li>循环</li>
<li>Mixin Extend</li>
<li>import</li>
<li>属性值引用</li>
</ul>
<h3 id="gulp-postcss"><a href="#gulp-postcss" class="headerlink" title="gulp-postcss"></a>gulp-postcss</h3><p>PostCSS 支持的构建工具</p>
<ul>
<li>CLI命令行工具</li>
<li>webpack postcss-loader</li>
<li>Gulp gulp-postcss</li>
<li>Grunt grunt-postcss</li>
<li>Rollup rollup-postcss</li>
<li>…</li>
</ul>
<p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200530093431237.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200530093431237.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<h3 id="webpack"><a href="#webpack" class="headerlink" title="webpack"></a>webpack</h3><p><a target="_blank" rel="noopener" href="https://img-blog.csdnimg.cn/20200530094124374.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70"><img src="https://img-blog.csdnimg.cn/20200530094124374.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA==,size_16,color_FFFFFF,t_70" alt="img"></a></p>
<ul>
<li>JS是整个应用的核心入口</li>
<li>一切资源均由JS管理依赖</li>
<li>一切资源均由webpack打包</li>
</ul>
<h3 id="webpack-和-CSS"><a href="#webpack-和-CSS" class="headerlink" title="webpack 和 CSS"></a>webpack 和 CSS</h3><ul>
<li>css-loader 将 CSS变为 JS</li>
<li>style-loader 将JS插入到head</li>
<li>ExtractTextPlugin 将 CSS 从 JS 中 提取出来</li>
<li>CSS modules 解决 CSS命名冲突的问题</li>
<li>less-loader sass-loader 各类预处理器</li>
<li>postcss-loader PostCSS处理</li>
</ul>
<h2 id="CSS-面试真题-6"><a href="#CSS-面试真题-6" class="headerlink" title="CSS 面试真题"></a>CSS 面试真题</h2><h3 id="如何解决CSS模块化问题"><a href="#如何解决CSS模块化问题" class="headerlink" title="如何解决CSS模块化问题"></a>如何解决CSS模块化问题</h3><ul>
<li>less sass 等CSS预处理器</li>
<li>PostCSS插件（postcss-import / precss等）</li>
<li>webpackl处理CSS（css-loader + style-loader）</li>
</ul>
<h3 id="PostCSS可以做什么？"><a href="#PostCSS可以做什么？" class="headerlink" title="PostCSS可以做什么？"></a>PostCSS可以做什么？</h3><ul>
<li>取决于插件做什么</li>
<li>autoprefixer cssnext precss等 兼容性处理</li>
<li>import 模块合并</li>
<li>css语法检查 兼容性检查</li>
<li>cssnano 压缩文件</li>
</ul>
<h3 id="CSS-modules是做什么的，如何使用"><a href="#CSS-modules是做什么的，如何使用" class="headerlink" title="CSS modules是做什么的，如何使用"></a>CSS modules是做什么的，如何使用</h3><ul>
<li>解决类名冲突的问题</li>
<li>使用PostCSS或者webpack等构建工具进行编译</li>
<li>在HTML模板中使用编译过程产生的类名</li>
</ul>
<h3 id="为什么使用JS来引用、加载CSS"><a href="#为什么使用JS来引用、加载CSS" class="headerlink" title="为什么使用JS来引用、加载CSS"></a>为什么使用JS来引用、加载CSS</h3><ul>
<li>JS作为入口，管理资源有天然优势</li>
<li>将组件的结构、样式、行为封装到一起，增强内聚</li>
<li>可以做更多处理（webpack）</li>
</ul>

                                    
                            </div>
                            <hr/>

                            

    <div class="reprint" id="reprint-statement">
        
            <div class="reprint__author">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-user">
                        Author:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="/feng-pan-fp/myblog.git/about" rel="external nofollow noreferrer">冯攀</a>
                </span>
            </div>
            <div class="reprint__type">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-link">
                        Link:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="https://gitee.com/feng-pan-fp/myblog.git/feng-pan-fp/myblog.git/2021/04/20/article-title/">https://gitee.com/feng-pan-fp/myblog.git/feng-pan-fp/myblog.git/2021/04/20/article-title/</a>
                </span>
            </div>
            <div class="reprint__notice">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-copyright">
                        Reprint policy:
                    </i>
                </span>
                <span class="reprint-info">
                    All articles in this blog are used except for special statements
                    <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                    reprint policy. If reproduced, please indicate source
                    <a href="/feng-pan-fp/myblog.git/about" target="_blank">冯攀</a>
                    !
                </span>
            </div>
        
    </div>

    <script async defer>
      document.addEventListener("copy", function (e) {
        let toastHTML = '<span>Copied successfully, please follow the reprint policy of this article</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">more</a>';
        M.toast({html: toastHTML})
      });

      function navToReprintStatement() {
        $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
      }
    </script>



                                <div class="tag_share" style="display: block;">
                                    <div class="post-meta__tag-list" style="display: inline-block;">
                                        
                                            <div class="article-tag">
                                                
                                                    <a href="/feng-pan-fp/myblog.git/tags/%E5%89%8D%E7%AB%AF%E5%8A%A0%E6%B2%B9%E7%AB%99/">
                                                        <span class="chip bg-color">前端加油站</span>
                                                    </a>
                                                    
                                            </div>
                                            
                                    </div>
                                    <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                                        <link rel="stylesheet" type="text/css" href="/feng-pan-fp/myblog.git/libs/share/css/share.min.css">
<div id="article-share">

    
    <div class="social-share" data-sites="twitter,facebook,google,qq,qzone,wechat,weibo,douban,linkedin" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
    <script src="/feng-pan-fp/myblog.git/libs/share/js/social-share.min.js"></script>
    

    

</div>

                                    </div>
                                </div>
                                
                        </div>
    </div>

    

                

                            

                                        

                                                    
                                                        <style>
    .valine-card {
        margin: 1.5rem auto;
    }

    .valine-card .card-content {
        padding: 20px 20px 5px 20px;
    }

    #vcomments textarea {
        box-sizing: border-box;
        background: url("/feng-pan-fp/myblog.git/medias/comment_bg.png") 100% 100% no-repeat;
    }

    #vcomments p {
        margin: 2px 2px 10px;
        font-size: 1.05rem;
        line-height: 1.78rem;
    }

    #vcomments blockquote p {
        text-indent: 0.2rem;
    }

    #vcomments a {
        padding: 0 2px;
        color: #4cbf30;
        font-weight: 500;
        text-decoration: none;
    }

    #vcomments img {
        max-width: 100%;
        height: auto;
        cursor: pointer;
    }

    #vcomments ol li {
        list-style-type: decimal;
    }

    #vcomments ol,
    ul {
        display: block;
        padding-left: 2em;
        word-spacing: 0.05rem;
    }

    #vcomments ul li,
    ol li {
        display: list-item;
        line-height: 1.8rem;
        font-size: 1rem;
    }

    #vcomments ul li {
        list-style-type: disc;
    }

    #vcomments ul ul li {
        list-style-type: circle;
    }

    #vcomments table, th, td {
        padding: 12px 13px;
        border: 1px solid #dfe2e5;
    }

    #vcomments table, th, td {
        border: 0;
    }

    table tr:nth-child(2n), thead {
        background-color: #fafafa;
    }

    #vcomments table th {
        background-color: #f2f2f2;
        min-width: 80px;
    }

    #vcomments table td {
        min-width: 80px;
    }

    #vcomments h1 {
        font-size: 1.85rem;
        font-weight: bold;
        line-height: 2.2rem;
    }

    #vcomments h2 {
        font-size: 1.65rem;
        font-weight: bold;
        line-height: 1.9rem;
    }

    #vcomments h3 {
        font-size: 1.45rem;
        font-weight: bold;
        line-height: 1.7rem;
    }

    #vcomments h4 {
        font-size: 1.25rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    #vcomments h5 {
        font-size: 1.1rem;
        font-weight: bold;
        line-height: 1.4rem;
    }

    #vcomments h6 {
        font-size: 1rem;
        line-height: 1.3rem;
    }

    #vcomments p {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    #vcomments hr {
        margin: 12px 0;
        border: 0;
        border-top: 1px solid #ccc;
    }

    #vcomments blockquote {
        margin: 15px 0;
        border-left: 5px solid #42b983;
        padding: 1rem 0.8rem 0.3rem 0.8rem;
        color: #666;
        background-color: rgba(66, 185, 131, .1);
    }

    #vcomments pre {
        font-family: monospace, monospace;
        padding: 1.2em;
        margin: .5em 0;
        background: #272822;
        overflow: auto;
        border-radius: 0.3em;
        tab-size: 4;
    }

    #vcomments code {
        font-family: monospace, monospace;
        padding: 1px 3px;
        font-size: 0.92rem;
        color: #e96900;
        background-color: #f8f8f8;
        border-radius: 2px;
    }

    #vcomments pre code {
        font-family: monospace, monospace;
        padding: 0;
        color: #e8eaf6;
        background-color: #272822;
    }

    #vcomments pre[class*="language-"] {
        padding: 1.2em;
        margin: .5em 0;
    }

    #vcomments code[class*="language-"],
    pre[class*="language-"] {
        color: #e8eaf6;
    }

    #vcomments [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
        position: inherit;
        margin-left: -1.3rem;
        margin-right: 0.4rem;
        margin-top: -1px;
        vertical-align: middle;
        left: unset;
        visibility: visible;
    }

    #vcomments b,
    strong {
        font-weight: bold;
    }

    #vcomments dfn {
        font-style: italic;
    }

    #vcomments small {
        font-size: 85%;
    }

    #vcomments cite {
        font-style: normal;
    }

    #vcomments mark {
        background-color: #fcf8e3;
        padding: .2em;
    }

    #vcomments table, th, td {
        padding: 12px 13px;
        border: 1px solid #dfe2e5;
    }

    table tr:nth-child(2n), thead {
        background-color: #fafafa;
    }

    #vcomments table th {
        background-color: #f2f2f2;
        min-width: 80px;
    }

    #vcomments table td {
        min-width: 80px;
    }

    #vcomments [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
        position: inherit;
        margin-left: -1.3rem;
        margin-right: 0.4rem;
        margin-top: -1px;
        vertical-align: middle;
        left: unset;
        visibility: visible;
    }
</style>

<div class="card valine-card" data-aos="fade-up">
    <div class="comment_headling" style="font-size: 20px; font-weight: 700; position: relative; padding-left: 20px; top: 15px; padding-bottom: 5px;">
        <i class="fas fa-comments fa-fw" aria-hidden="true"></i>
        <span>评论</span>
    </div>
    <div id="vcomments" class="card-content" style="display: grid">
    </div>
</div>

<script src="/feng-pan-fp/myblog.git/libs/valine/av-min.js"></script>
<script src="/feng-pan-fp/myblog.git/libs/valine/Valine.min.js"></script>
<script>
    new Valine({
        el: '#vcomments',
        appId: 'csXeKQK5aCimndgGQdPqlMdU-MdYXbMMI',
        appKey: 'xuG26POgmoHjQyx3JiCSpEKy',
        notify: 'true' === 'true',
        verify: 'true' === 'true',
        visitor: 'true' === 'true',
        avatar: '',
        pageSize: '3',
        lang: 'en',
        placeholder: 'just go go'
    });
</script>

<!--酷Q推送-->


                                                            

                                                                

                                                                            

                                                                                        

                                                                                                    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fas fa-chevron-left"></i>&nbsp;Previous</div>
            <div class="card">
                <a href="/feng-pan-fp/myblog.git/2021/04/20/Rubikscube%20/">
                    <div class="card-image">
                        
                        
                        <img src="/feng-pan-fp/myblog.git/medias/featureimages/23.jpg" class="responsive-img" alt="实现倒计时效果">
                        
                        <span class="card-title">实现倒计时效果</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            
                        
                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="far fa-clock fa-fw icon-date"></i>2021-04-20
                        </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/feng-pan-fp/myblog.git/categories/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0-%E6%A0%B8%E5%BF%83js%E4%BB%A3%E7%A0%81%E5%8F%8A%E6%80%9D%E8%B7%AF/" class="post-category">
                                    深度学习.核心js代码及思路
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                Next&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/feng-pan-fp/myblog.git/2021/04/20/slideshow/">
                    <div class="card-image">
                        
                        
                        <img src="/feng-pan-fp/myblog.git/medias/featureimages/8.jpg" class="responsive-img" alt="原生JS实现轮播图详细含源码">
                        
                        <span class="card-title">原生JS实现轮播图详细含源码</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2021-04-20
                            </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/feng-pan-fp/myblog.git/categories/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0-%E6%A0%B8%E5%BF%83js%E4%BB%A3%E7%A0%81%E5%8F%8A%E6%80%9D%E8%B7%AF/" class="post-category">
                                    深度学习.核心js代码及思路
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
            </div>
        </div>
        
    </div>
</article>

</div>


    <script>
        $('#articleContent').on('copy', function(e) {
            // IE8 or earlier browser is 'undefined'
            if (typeof window.getSelection === 'undefined') return;

            var selection = window.getSelection();
            // if the selection is short let's not annoy our users.
            if (('' + selection).length < Number.parseInt('120')) {
                return;
            }

            // create a div outside of the visible area and fill it with the selected text.
            var bodyElement = document.getElementsByTagName('body')[0];
            var newdiv = document.createElement('div');
            newdiv.style.position = 'absolute';
            newdiv.style.left = '-99999px';
            bodyElement.appendChild(newdiv);
            newdiv.appendChild(selection.getRangeAt(0).cloneContents());

            // we need a <pre> tag workaround.
            // otherwise the text inside "pre" loses all the line breaks!
            if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
                newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
            }

            var url = document.location.href;
            newdiv.innerHTML += '<br />' +
                'From: 消逝の博客<br />' +
                'Author: 冯攀<br />' +
                'Link: <a href="' + url + '">' + url + '</a><br />' +
                '本文章著作权归作者所有，任何形式的转载都请注明出处。';

            selection.selectAllChildren(newdiv);
            window.setTimeout(function() {
                bodyElement.removeChild(newdiv);
            }, 200);
        });
    </script>
    

        <!-- 代码块功能依赖 -->
        <script type="text/javascript" src="/feng-pan-fp/myblog.git/libs/codeBlock/codeBlockFuction.js"></script>

        <!-- 代码语言 -->
        
            <script type="text/javascript" src="/feng-pan-fp/myblog.git/libs/codeBlock/codeLang.js"></script>
            

                <!-- 代码块复制 -->
                
                    <script type="text/javascript" src="/feng-pan-fp/myblog.git/libs/codeBlock/codeCopy.js"></script>
                    

                        <!-- 代码块收缩 -->
                        
                            <script type="text/javascript" src="/feng-pan-fp/myblog.git/libs/codeBlock/codeShrink.js"></script>
                            
                                <!-- 添加的x新代码 -->
                                <!-- 代码块功能依赖 -->
                                <script type="text/javascript" src="/feng-pan-fp/myblog.git/libs/codeBlock/codeBlockFuction.js"></script>
                                <!-- 代码语言 -->
                                
                                    <script type="text/javascript" src="/feng-pan-fp/myblog.git/libs/codeBlock/codeLang.js"></script>
                                    
                                        <!-- 代码块复制 -->
                                        
                                            <script type="text/javascript" src="/feng-pan-fp/myblog.git/libs/codeBlock/codeCopy.js"></script>
                                            
                                                <!-- 代码块收缩 -->
                                                
                                                    <script type="text/javascript" src="/feng-pan-fp/myblog.git/libs/codeBlock/codeShrink.js"></script>
                                                    
                                                        <!-- 代码块折行 -->
                                                        
                                                            <style type="text/css">
                                                                code[class*="language-"],
                                                                pre[class*="language-"] {
                                                                    white-space: pre !important;
                                                                }
                                                            </style>
                                                            
    </div>
    <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
        <div class="toc-widget card" style="background-color: white;">
            <div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;TOC</div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

<!-- TOC 悬浮按钮. -->

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a class="btn-floating btn-large bg-color">
        <i class="fas fa-list-ul"></i>
    </a>
</div>


<script src="/feng-pan-fp/myblog.git/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingsOffset: -($(window).height() * 0.4 - 45),
            collapseDepth: Number('0'),
            headingSelector: 'h2, h3, h4'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h2, h3, h4').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });

        
        /* 修复文章卡片 div 的宽度. */
        let fixPostCardWidth = function (srcId, targetId) {
            let srcDiv = $('#' + srcId);
            if (srcDiv.length === 0) {
                return;
            }

            let w = srcDiv.width();
            if (w >= 450) {
                w = w + 21;
            } else if (w >= 350 && w < 450) {
                w = w + 18;
            } else if (w >= 300 && w < 350) {
                w = w + 16;
            } else {
                w = w + 14;
            }
            $('#' + targetId).width(w);
        };

        // 切换TOC目录展开收缩的相关操作.
        const expandedClass = 'expanded';
        let $tocAside = $('#toc-aside');
        let $mainContent = $('#main-content');
        $('#floating-toc-btn .btn-floating').click(function () {
            if ($tocAside.hasClass(expandedClass)) {
                $tocAside.removeClass(expandedClass).hide();
                $mainContent.removeClass('l9');
            } else {
                $tocAside.addClass(expandedClass).show();
                $mainContent.addClass('l9');
            }
            fixPostCardWidth('artDetail', 'prenext-posts');
        });
        
    });
</script>

    

</main>




    <footer class="page-footer bg-color">
    
        <link rel="stylesheet" href="/feng-pan-fp/myblog.git/libs/aplayer/APlayer.min.css">
<style>
    .aplayer .aplayer-lrc p {
        
        display: none;
        
        font-size: 12px;
        font-weight: 700;
        line-height: 16px !important;
    }

    .aplayer .aplayer-lrc p.aplayer-lrc-current {
        
        display: none;
        
        font-size: 15px;
        color: #42b983;
    }

    
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
        left: -66px !important;
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
        left: 0px !important;
    }

    
</style>
<div class="">
    
    <div class="row">
        <meting-js class="col l8 offset-l2 m10 offset-m1 s12"
                   server="netease"
                   type="playlist"
                   id="503838841"
                   fixed='true'
                   autoplay='false'
                   theme='#42b983'
                   loop='all'
                   order='random'
                   preload='auto'
                   volume='0.7'
                   list-folded='true'
        >
        </meting-js>
    </div>
</div>

<script src="/feng-pan-fp/myblog.git/libs/aplayer/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

    
    <div class="container row center-align" style="margin-bottom: 15px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            
                <span id="year">2021</span>
            
            <span id="year">2021</span>
            <a href="/feng-pan-fp/myblog.git/about" target="_blank">冯攀</a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            
            
            
            
            
            <!--  -->
            
                <span id="busuanzi_container_site_pv" style='display:none'></span>
                |&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;<span id="busuanzi_value_site_pv"
                    class="white-color"></span>&nbsp;次
            </span>
            
            
                <span id="busuanzi_container_site_uv" style='display:none'></span>
                |&nbsp;<i class="fas fa-users"></i>&nbsp;总访问人数:&nbsp;<span id="busuanzi_value_site_uv"
                    class="white-color"></span>&nbsp;人
            </span>
            
            <br>
            
            <span id="sitetime">载入运行时间...</span>
            <script>
                function siteTime() {
                    var seconds = 1000;
                    var minutes = seconds * 60;
                    var hours = minutes * 60;
                    var days = hours * 24;
                    var years = days * 365;
                    var today = new Date();
                    var startYear = "2021";
                    var startMonth = "4";
                    var startDate = "17";
                    var startHour = "0";
                    var startMinute = "0";
                    var startSecond = "0";
                    var todayYear = today.getFullYear();
                    var todayMonth = today.getMonth() + 1;
                    var todayDate = today.getDate();
                    var todayHour = today.getHours();
                    var todayMinute = today.getMinutes();
                    var todaySecond = today.getSeconds();
                    var t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond);
                    var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
                    var diff = t2 - t1;
                    var diffYears = Math.floor(diff / years);
                    var diffDays = Math.floor((diff / days) - diffYears * 365);
                    var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
                    var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) /
                        minutes);
                    var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                        diffMinutes * minutes) / seconds);
                    if (startYear == todayYear) {
                        document.getElementById("year").innerHTML = todayYear;
                        document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffDays + " 天 " + diffHours +
                            " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                    } else {
                        document.getElementById("year").innerHTML = startYear + " - " + todayYear;
                        document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffYears + " 年 " + diffDays +
                            " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                    }
                }
                setInterval(siteTime, 1000);
            </script>
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">
    <a href="https://github.com/fp994637/fp994637.github.io" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:1052264679@qq.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1052264679" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 1052264679" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>







    <a href="/feng-pan-fp/myblog.git/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50">
        <i class="fas fa-rss"></i>
    </a>

</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;Search</span>
            <input type="search" id="searchInput" name="s" placeholder="Please enter a search keyword"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    var searchFunc = function (path, search_id, content_id) {
        'use strict';
        $.ajax({
            url: path,
            dataType: "xml",
            success: function (xmlResponse) {
                // get the contents from search data
                var datas = $("entry", xmlResponse).map(function () {
                    return {
                        title: $("title", this).text(),
                        content: $("content", this).text(),
                        url: $("url", this).text()
                    };
                }).get();
                var $input = document.getElementById(search_id);
                var $resultContent = document.getElementById(content_id);
                $input.addEventListener('input', function () {
                    var str = '<ul class=\"search-result-list\">';
                    var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                    $resultContent.innerHTML = "";
                    if (this.value.trim().length <= 0) {
                        return;
                    }
                    // perform local searching
                    datas.forEach(function (data) {
                        var isMatch = true;
                        var data_title = data.title.trim().toLowerCase();
                        var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                        var data_url = data.url;
                        data_url = data_url.indexOf('/') === 0 ? data.url : '/' + data_url;
                        var index_title = -1;
                        var index_content = -1;
                        var first_occur = -1;
                        // only match artiles with not empty titles and contents
                        if (data_title !== '' && data_content !== '') {
                            keywords.forEach(function (keyword, i) {
                                index_title = data_title.indexOf(keyword);
                                index_content = data_content.indexOf(keyword);
                                if (index_title < 0 && index_content < 0) {
                                    isMatch = false;
                                } else {
                                    if (index_content < 0) {
                                        index_content = 0;
                                    }
                                    if (i === 0) {
                                        first_occur = index_content;
                                    }
                                }
                            });
                        }
                        // show search results
                        if (isMatch) {
                            str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                            var content = data.content.trim().replace(/<[^>]+>/g, "");
                            if (first_occur >= 0) {
                                // cut out 100 characters
                                var start = first_occur - 20;
                                var end = first_occur + 80;
                                if (start < 0) {
                                    start = 0;
                                }
                                if (start === 0) {
                                    end = 100;
                                }
                                if (end > content.length) {
                                    end = content.length;
                                }
                                var match_content = content.substr(start, end);
                                // highlight all keywords
                                keywords.forEach(function (keyword) {
                                    var regS = new RegExp(keyword, "gi");
                                    match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");
                                });

                                str += "<p class=\"search-result\">" + match_content + "...</p>"
                            }
                            str += "</li>";
                        }
                    });
                    str += "</ul>";
                    $resultContent.innerHTML = str;
                });
            }
        });
    };

    searchFunc('/feng-pan-fp/myblog.git/search.xml', 'searchInput', 'searchResult');
});
</script>

    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="/feng-pan-fp/myblog.git/libs/materialize/materialize.min.js"></script>
    <script src="/feng-pan-fp/myblog.git/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/feng-pan-fp/myblog.git/libs/aos/aos.js"></script>
    <script src="/feng-pan-fp/myblog.git/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/feng-pan-fp/myblog.git/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/feng-pan-fp/myblog.git/js/matery.js"></script>

    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <script src="/feng-pan-fp/myblog.git/libs/others/clicklove.js" async="async"></script>
    
    
    <script async src="/feng-pan-fp/myblog.git/libs/others/busuanzi.pure.mini.js"></script>
    

    

    

    <!--腾讯兔小巢-->
    
    
    <script type="text/javascript" color="0,0,255"
        pointColor="0,0,255" opacity='0.7'
        zIndex="-1" count="99"
        src="/feng-pan-fp/myblog.git/libs/background/canvas-nest.js"></script>
    

    
    
    <script type="text/javascript" size="150" alpha='0.6'
        zIndex="-1" src="/feng-pan-fp/myblog.git/libs/background/ribbon.min.js" async="async"></script>
    

    

    
    <script src="/feng-pan-fp/myblog.git/libs/instantpage/instantpage.js" type="module"></script>
    
   
       
<script src="/feng-pan-fp/myblog.git/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"log":false,"model":{"jsonPath":"/feng-pan-fp/myblog.git/live2dw/assets/shizuku.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":false},"react":{"opacity":0.7}});</script></body>

</html>
<script>
        //  <!-- 新增加的代码修改导航栏 -->
        var OriginTitle = document.title;
        var titleTime;
        document.addEventListener('visibilitychange', function () {
            if (document.hidden) {
                $('[rel="icon"]').attr('href', "https://sm.ms/image/M5B4Dfz3uRWnTh1");
                document.title = '我相信你还会回来的！';
                clearTimeout(titleTime);
            }
            else {
                $('[rel="icon"]').attr('href', "https://sm.ms/image/M5B4Dfz3uRWnTh1");
                document.title = '哈哈，我就知道！' + OriginTitle;
                titleTime = setTimeout(function () {
                    document.title = OriginTitle;
                }, 2000);
            }
        });
</script>
